/* Roblox games (js/games.js): a game's page, the team's Games tab, the key picker, the game links in the sidebar,
   on boards and on My work. Charts are one series in the chart cyan (--chart, a step deeper than the glow accent so
   it sits in the chart lightness band: #16a6b3 at night, #00809a by day, both 3:1 or better on their surface), with
   a wash at 10% under lines, hairline grids, and dim mono ticks. Release markers are dim hairlines, not cyan. */
:root { --chart: #16a6b3; --warn: #fbbf24; }
:root[data-theme="light"] { --chart: #00809a; --warn: #9a5b06; }

/* a field's character count against Roblox's limit, at its right under it; red past the limit */
.ev-count { justify-self: end; margin-top: -2px; }
.ev-count.over { color: var(--bad); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- icons ---------- */
.gicon {
  display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.22); overflow: hidden;
  background: var(--raised-2); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.gicon img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the page ---------- */
.game-head { align-items: center; }
.game-title { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 320px; }
.game-title > div { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.game-title h1 { overflow-wrap: anywhere; }
/* facts split by dots; each line's first dot sits just past the list's left edge, clipped, so a wrapped line never
   starts with one */
.game-meta { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 18px; max-width: 100%; overflow: hidden; color: var(--dim); font-size: 12.5px; }
.game-meta li { margin-left: -18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% + 18px); }
.game-meta li::before { content: "\00b7"; display: inline-block; width: 18px; text-align: center; }
.game-meta .g-private { color: var(--mist); }
.game-meta .g-private .ic { vertical-align: -1px; margin-right: 4px; }
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
/* a game's pages are wider than the rest (.page.wide), and where there's room they set panels side by side. Each part
   asks how much room it has (a container query), not how wide the window is, as the sidebar takes its share. */
.game-body, .release-body { container: gbody / inline-size; }
.game-main { container: gmain / inline-size; }
@container gbody (min-width: 1500px) {
  .game-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}
.game-main, .game-side { display: grid; gap: 16px; min-width: 0; }
/* one-column grids whose rows hold a long name on one line (a card, cut short with an ellipsis): a bare grid's column
   grows to fit the line, which pushed the side panels past the page */
.game-main, .game-side, .rel-list, .rel-cards, .rep-rels { grid-template-columns: minmax(0, 1fr); }
.game-main .panel + .panel, .game-side .panel + .panel { margin-top: 0; }
.game-side { position: sticky; top: 20px; }
.game-body > .form-err { margin-bottom: 16px; }

/* players now: the one hero figure on the page with the rating across from it and the facts under both, or on a wide
   page the facts between them */
.g-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hero rating" "facts facts"; align-items: end; column-gap: 28px; }
.g-hero-wrap { grid-area: hero; display: grid; gap: 6px; }
@container gmain (min-width: 1000px) {
  .g-now { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "hero facts rating"; margin-bottom: 22px; }
  .g-now .g-facts { align-self: center; margin: 0; padding: 6px 0 6px 28px; border-top: 0; border-left: 1px solid var(--line-soft); }
}
.g-hero { display: flex; align-items: baseline; gap: 10px; }
.g-hero-n { font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--white); }
.g-hero-l { color: var(--mist); font-size: 15px; }
.g-hero-d { display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12.5px; }
.g-facts { grid-area: facts; list-style: none; margin: 14px 0 18px; padding: 12px 0 0; display: flex; gap: 6px 22px; flex-wrap: wrap; color: var(--dim); font-size: 13px; border-top: 1px solid var(--line-soft); }
/* the rating: the share Roblox shows, a bar of it (the chart cyan on a hairline track), the two counts under it */
/* (a fixed width rather than min(220px, 100%): in the grid's auto column a percentage would shrink it to its words) */
.g-rating { grid-area: rating; display: grid; gap: 6px; width: 220px; max-width: 100%; }
.g-rating-top { display: flex; align-items: baseline; gap: 7px; }
.g-rating-n { color: var(--white); font-size: 24px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.g-rating-l { color: var(--mist); font-size: 14px; }
.g-rating-move { margin-left: auto; color: var(--dim); font-size: 11.5px; white-space: nowrap; }
.g-rating-bar { display: block; height: 6px; border-radius: 3px; background: rgba(var(--fg-rgb), 0.08); overflow: hidden; }
.g-rating-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--chart); }
.g-rating-counts { display: flex; justify-content: space-between; gap: 12px; color: var(--mist); font-size: 12px; }
.g-rating-counts > span { display: inline-flex; align-items: center; gap: 5px; }
.g-rating-counts .ic { color: var(--dim); }
.g-facts .mono { color: var(--text); }
.g-chart-title { font-size: 13.5px; font-weight: 600; color: var(--mist); margin-bottom: 6px; }
.g-sub { font-size: 13.5px; font-weight: 600; color: var(--mist); margin: 18px 0 8px; }
.g-note { margin-top: 10px; color: var(--dim); font-size: 12.5px; }
.g-note.warn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; color: var(--warn); }
.g-note.warn .ic { margin-top: 3px; }
.g-note-key { display: inline-block; width: 1px; height: 12px; margin-right: 7px; vertical-align: -1px; background: rgba(var(--dim-rgb), 0.7); }
.g-off { color: var(--dim); font-size: 13.5px; padding: 6px 0 2px; max-width: 62ch; }
.panel h2 .count { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text); margin-left: 8px; }
.panel h2 .dim.small { font-weight: 400; margin-left: 6px; }

/* charts */
.chart-wrap { display: grid; gap: 4px; }
.chart { position: relative; border-radius: 8px; }
.chart:focus-visible { outline-offset: 4px; }
.chart-plot { width: 100%; touch-action: pan-y; cursor: crosshair; }
.chart-svg { display: block; overflow: visible; }
.chart-tick { font-family: var(--mono); font-size: 11px; fill: var(--dim); font-variant-numeric: tabular-nums; }
.chart-grid { stroke: var(--line-soft); stroke-width: 1; shape-rendering: crispEdges; }
.chart-line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-wash { fill: var(--chart); opacity: 0.1; }
/* a second series to compare with: quiet and dashed, under the first */
.chart-compare { fill: none; stroke: var(--mist); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linejoin: round; opacity: 0.85; }
.chart-tip-dash { display: inline-block; width: 14px; height: 0; border-top: 1.5px dashed var(--mist); margin-right: 6px; vertical-align: 3px; }
.chart-bar { fill: var(--chart); transition: opacity 0.12s; }
.chart-bar.partial { opacity: 0.45; }
.chart-bar.on { opacity: 1; filter: brightness(1.25); }
.chart-mark { stroke: rgba(var(--dim-rgb), 0.55); stroke-width: 1; shape-rendering: crispEdges; }
.chart-mark-dot { fill: var(--dim); }
.chart-mark-n { font-family: var(--mono); font-size: 9.5px; font-weight: 600; fill: var(--raised); pointer-events: none; }
.chart-cross { stroke: var(--mist); stroke-width: 1; opacity: 0.7; shape-rendering: crispEdges; }
.chart-dot { fill: var(--chart); stroke: var(--raised); stroke-width: 2; }
/* a chart's focus (a release's page: when it went out): the accent line under a tag naming it, the time after it
   faintly shaded, and its row in the table marked */
.chart-after { fill: var(--accent); opacity: 0.06; }
.chart-focus { stroke: var(--accent); stroke-width: 2; }
.chart-focus-tag {
  position: absolute; top: 0; z-index: 1; display: inline-flex; align-items: baseline; gap: 7px; height: 22px; padding: 0 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, var(--raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--white); font-size: 12px; font-weight: 600; line-height: 22px; white-space: nowrap; pointer-events: none; max-width: 100%;
}
/* (a long update name shortens; the time stays whole, and the chart's own name has the rest) */
.chart-focus-tag > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chart-focus-tag .mono { color: var(--mist); font-size: 11px; font-weight: 500; flex: none; }
.chart-table tr.is-focus td { color: var(--white); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.chart-table-focus { color: var(--accent); }
.chart-tip {
  position: absolute; top: -6px; transform: translateY(-100%); z-index: 2; display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px;
  background: var(--pop); border: 1px solid var(--line); box-shadow: 0 10px 24px -12px rgba(var(--shade-rgb), calc(0.7 * var(--shade-k)));
  color: var(--dim); font-size: 12px; white-space: nowrap; pointer-events: none;
}
.chart-tip strong { color: var(--white); font-size: 14px; font-weight: 600; }
.chart-tip-mark { display: flex; align-items: center; gap: 6px; color: var(--mist); }
.chart-tip-key { display: inline-block; width: 1px; height: 11px; background: var(--dim); }
.chart-table summary { width: max-content; color: var(--dim); font-size: 12.5px; cursor: pointer; padding: 2px 0; }
.chart-table summary:hover { color: var(--white); }
.chart-table-scroll { max-height: 240px; overflow: auto; margin-top: 6px; border: 1px solid var(--line-soft); border-radius: 8px; }
.chart-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chart-table th, .chart-table td { padding: 5px 10px; text-align: left; border-top: 1px solid var(--line-soft); }
.chart-table th { position: sticky; top: 0; background: var(--th); color: var(--mist); font-weight: 600; border-top: 0; }
.chart-table td.mono { text-align: right; color: var(--text); }

/* the last 28 days: small multiples split by hairlines (the first in each row loses its line to the clip) */
.g-daily .row-between { margin-bottom: 14px; align-items: flex-start; }
.g-multiples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); overflow: hidden; row-gap: 16px; }
.g-multiple { display: flex; flex-direction: column; gap: 3px; padding: 2px 14px; box-shadow: -1px 0 0 var(--line-soft); min-width: 0; }
.g-multiple > .spark { margin-top: auto; padding-top: 4px; } /* every sparkline on one line, however much sits above it */
.g-m-label { color: var(--dim); font-size: 12.5px; }
.g-m-value { color: var(--white); font-size: 21px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.g-head-sub { color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.g-m-sub { color: var(--dim); font-size: 12px; min-height: 18px; }
.g-m-none { color: var(--dim); font-size: 13px; }
.g-delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-weight: 500; }
.g-delta.up { color: var(--mint); }
.g-delta.down { color: var(--late); }
.spark { display: block; width: 100%; margin-top: 4px; }
.spark svg { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--chart); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--chart); stroke: var(--raised); stroke-width: 2; }

/* errors */
.g-errors .row-between { margin-bottom: 8px; }
.err-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; background: var(--well); }
.err-list > li + li { border-top: 1px solid var(--line-soft); }
.err-row {
  display: grid; grid-template-columns: 64px 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer;
  list-style: none; transition: background 0.15s;
}
.err-row::-webkit-details-marker { display: none; }
.err-row:hover { background: var(--row-hover); }
.err[open] .err-row { background: rgba(var(--fg-rgb), 0.03); }
.err-n { text-align: right; color: var(--white); font-size: 13px; }
.err-sev { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; }
.err-sev.bad { color: var(--late); }
.err-sev.warn { color: var(--warn); }
.err-text { display: grid; min-width: 0; }
.err-msg { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.err-where { color: var(--dim); font-size: 12px; }
.err-make { white-space: nowrap; }
.err-bug { display: inline-flex; align-items: center; gap: 7px; max-width: 280px; color: var(--mist); font-size: 12.5px; }
.err-bug > span:not(.pill) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.err-bug:hover { color: var(--white); }
.pill { display: inline-flex; align-items: center; flex: none; min-height: 22px; padding: 0 8px; border-radius: 6px; background: var(--pill); color: var(--pill-ink); box-shadow: inset 0 0 0 1px var(--pill-edge); font-size: 12px; font-weight: 600; }
.pill.none { background: none; box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--dim); font-weight: 400; }
.err-body { display: grid; gap: 8px; padding: 2px 14px 14px calc(64px + 92px + 36px); }
.err-full { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.err-stack {
  margin: 0; padding: 10px 12px; max-height: 260px; overflow: auto; border-radius: 8px; background: var(--deep); border: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--mist); white-space: pre-wrap; overflow-wrap: anywhere;
}
.bug-pick { display: grid; gap: 1px; max-height: 420px; overflow-y: auto; }
/* (bugs.js pickBug: a search over the game's bug cards, then the boards to make a new one on) */
.bug-find { margin: 2px 4px 6px; width: calc(100% - 8px); padding: 7px 10px; font-size: 13.5px; }
.bug-cards { display: grid; gap: 1px; }
.bug-wait { padding: 4px 10px 8px; }
.bug-card .tdot { margin: 0 3px; }
.bug-card .tdot.none { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.bug-card-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bug-card .menu-hint { white-space: nowrap; }
/* a fix's verdict on a bug pill: mint once its errors went quiet after its release, amber while they're still seen */
.fix-mark { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11.5px; }
.fix-mark.quiet { color: var(--mint); }
.fix-mark.seen { color: var(--warn); }
.err-near { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; color: var(--dim); font-size: 12px; }
.err-near strong { min-width: 0; color: var(--mist); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.err-near .ic { color: var(--accent); }
/* the weekly report's bug fixes */
.rep-fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rep-fixes li { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rep-fixes a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.fix-state { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; font-weight: 600; }
.fix-state.quiet { color: var(--mint); }
.fix-state.seen { color: var(--warn); }

/* the side panels */
.game-side .panel { padding: 18px 18px; }
/* releases: one line each, linking to its page, updates starred with their names; the next update in a well above */
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; }
.rel-list > li { border-top: 1px solid var(--line-soft); }
.rel-list > li:first-child { border-top: 0; }
.rel-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px; margin: 0 -6px; border-radius: 6px; color: var(--text); }
a.rel-row:hover { background: rgba(var(--fg-rgb), 0.04); }
a.rel-row:hover .rel-v { color: var(--accent); }
.rel-row time { margin-left: auto; white-space: nowrap; }
.rel-row .kind.update { min-width: 0; }
.rel-row .kind span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-v { color: var(--white); font-size: 13px; }
.rel-n { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 0 7px; min-height: 20px; border-radius: 6px; background: rgba(var(--fg-rgb), 0.05); color: var(--mist); font-size: 12px; }
.rel-all { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; }
.rel-cards { list-style: none; margin: 2px 0 8px; padding: 0; display: grid; gap: 1px; }
.rel-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 6px; margin: 0 -6px; border-radius: 6px; color: var(--text); font-size: 13px; }
.rel-card:hover { background: rgba(var(--fg-rgb), 0.04); color: var(--white); }
.rel-card .pill { min-height: 20px; padding: 0 6px; font-size: 11.5px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 20px; }
.rel-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* on a release's page and the Releases tab a card's name is shown whole, its board at the end of the line */
.rel-card.wrap { align-items: flex-start; flex-wrap: wrap; padding: 5px 6px; font-size: 13.5px; }
.rel-card.wrap .pill { margin-top: 1px; }
.rel-card.wrap .rel-card-name { flex: 1 1 240px; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.45; }
.rel-card-board { margin-left: auto; color: var(--dim); font-size: 12px; line-height: 1.6; white-space: nowrap; }
.rel-next { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--well); border: 1px solid var(--line-soft); color: var(--mist); }
a.rel-next:hover { border-color: rgba(var(--glow-rgb), 0.3); color: var(--white); }
.rel-next-head { display: grid; gap: 1px; }
.rel-next-head > span:first-child { color: var(--white); font-weight: 600; font-size: 13px; }
/* update or patch: the accent and a star for the versions a team announces, a quiet outline for the rest */
.kind { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1; }
.kind.update { color: var(--accent); background: rgba(var(--glow-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--glow-rgb), 0.26); }
.kind.patch { color: var(--dim); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-soft); }
.chart-mark.major { stroke: rgba(var(--glow-rgb), 0.8); }
.chart-mark-dot.major { fill: var(--accent); }
.g-note-key.major { background: var(--accent); }
.g-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.g-board-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-board-list .check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-board-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 0; color: var(--text); }
.g-board-link:hover { color: var(--white); }
.g-board-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-id { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 6px; }
.key-id .ic { color: var(--accent); flex: none; }
.key-name { color: var(--white); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-state { font-weight: 600; }
.key-state.good { color: var(--mint); }
.key-state.bad { color: var(--late); }
.g-key .form-err { margin-top: 8px; }
.key-feats { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--mist); }
.key-feats li { display: flex; align-items: center; gap: 8px; }
.feat { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; flex: none; }
.feat.yes { color: var(--mint); background: rgba(var(--fg-rgb), 0.04); }
.feat.no { color: var(--dim); background: rgba(var(--fg-rgb), 0.03); }
.g-key-actions { margin-top: 14px; }

/* the key picker (add a game, change a key) */
.key-choices { display: grid; gap: 6px; }
.key-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--well); cursor: pointer; }
.key-choice:hover { border-color: var(--line); }
.key-choice:has(input:checked) { border-color: var(--accent); background: rgba(var(--sel-rgb), 0.08); }
.key-choice input { accent-color: var(--accent-d); margin: 3px 0 0; flex: none; }
.key-choice > span { display: grid; min-width: 0; }
.key-choice-t { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.key-input { font-size: 12px; resize: vertical; min-height: 64px; word-break: break-all; }
.key-help { display: grid; gap: 6px; color: var(--mist); font-size: 13px; }
.key-help ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.key-help code, .amb code { font-family: var(--mono); font-size: 12px; color: var(--text); background: rgba(var(--fg-rgb), 0.05); padding: 1px 5px; border-radius: 5px; }
.amb { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--well); color: var(--mist); font-size: 13.5px; }

/* ---------- a team's Games tab ---------- */
/* its games added up: players now beside the last 28 days, each under a label, then the week as one line (a game
   page's parts) */
.g-sum-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.g-sum-now { display: grid; gap: 6px; min-width: 0; }
.g-sum-days { flex: 0 1 400px; min-width: 0; }
.g-sum-when { color: var(--dim); font-size: 12.5px; margin-bottom: 2px; }
.g-sum-days .g-sum-when { margin-bottom: 8px; }
.g-sum-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 6px 22px; flex-wrap: wrap; color: var(--dim); font-size: 13px; }
.g-sum-facts .mono { color: var(--text); }
.g-sum-days .g-multiple:first-child { padding-left: 0; }
.gcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.gcard {
  display: grid; gap: 8px; height: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--panel);
  color: var(--text); transition: border-color 0.15s, transform 0.2s var(--ease); --raised: var(--panel-ring);
}
.gcard:hover { border-color: var(--line); transform: translateY(-1px); color: var(--text); }
.gcard-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gcard-text { display: grid; min-width: 0; }
.gcard-name { color: var(--white); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard-sub { font-size: 12px; font-family: var(--mono); }
.gcard-now { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.gcard-n { color: var(--white); font-size: 22px; font-weight: 600; line-height: 1.1; }
.gcard-foot { display: flex; justify-content: space-between; gap: 10px; color: var(--dim); font-size: 12px; }
.gcard-liked { display: inline-flex; align-items: center; gap: 5px; }
.key-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; background: var(--panel); }
.key-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.key-row:first-child { border-top: 0; }
.key-row > .ic { color: var(--accent); flex: none; }
.key-row-text { flex: 1; display: grid; min-width: 0; }

/* whose a key is: an account or a group, opening its Roblox page */
.key-owner { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--mist); }
.key-owner .ic { color: var(--dim); flex: none; }
.key-owner > span:not(.dim) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-owner:hover { color: var(--text); }
.key-by { display: flex; align-items: center; gap: 2px; margin-top: 4px; min-width: 0; }
.key-row-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.key-row .key-state { flex: none; }
.key-games { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.key-games legend { padding: 0; margin-bottom: 6px; }

/* ---------- elsewhere: the sidebar, a board's header, My work ---------- */
.side-game .gicon { border-radius: 4px; }
.bhead-crumbs { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.bgames { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.bgame {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; max-width: 260px; padding: 2px 9px 2px 3px; border-radius: 7px;
  border: 1px solid var(--line-soft); background: var(--well); color: var(--mist); font-size: 12.5px;
}
.bgame span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgame .gicon { border-radius: 5px; }
.bgame:hover { border-color: var(--line); color: var(--white); }
.my-games-list { list-style: none; margin: 10px -8px 0; padding: 0; display: grid; gap: 1px; }
.my-game { display: grid; grid-template-columns: 32px minmax(0, 1fr) 72px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: var(--text); --raised: var(--panel-ring); }
.my-game:hover { background: rgba(var(--fg-rgb), 0.04); color: var(--text); }
.my-game-text { display: grid; min-width: 0; }
.my-game-name { color: var(--text); font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-game-sub { color: var(--dim); font-size: 12.5px; }
.my-game-sub .mono { color: var(--mist); }
.my-game .spark { margin-top: 0; }

/* ---------- the weekly report ---------- */
.rep-head .page-sub .mono { color: var(--text); }
.rep-back { gap: 7px; margin-bottom: 10px; }
.rep-section { scroll-margin-top: 76px; }
.rep-note { display: flex; align-items: center; gap: 8px; margin: -6px 0 16px; color: var(--mist); font-size: 13px; }
.rep-games { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.rep-game { min-width: 0; }
.rep-game-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rep-game-name { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: var(--white); }
.rep-game-name h2 { overflow-wrap: anywhere; }
a.rep-game-name:hover h2 { color: var(--accent); }
.rep-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--well); }
.rep-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rep-table th, .rep-table td { padding: 8px 14px; text-align: left; border-top: 1px solid var(--line-soft); white-space: nowrap; }
.rep-table thead th { border-top: 0; color: var(--dim); font-size: 12px; font-weight: 500; }
.rep-table tbody th { color: var(--mist); font-weight: 500; }
.rep-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rep-table td.num { color: var(--white); }
.rep-table td.num.dim { color: var(--dim); }
.rep-table .rep-ch { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.rep-ch .ic { vertical-align: -2px; margin-right: 4px; }
.rep-ch.good { color: var(--mint); }
.rep-ch.bad { color: var(--late); }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 8px 28px; }
.rep-col { min-width: 0; }
.g-sub .count { margin-left: 8px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text); }
.rep-rels { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.rep-rel-rest { color: var(--dim); font-size: 12.5px; }
.rep-rel-rest .mono { color: var(--mist); }
.rep-rel-head { display: flex; align-items: center; gap: 10px; }
.rep-rel-wrap a.mono:hover { color: var(--accent); }
.dr-ship .kind { margin: 0 2px 0 6px; }
.rep-errs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rep-errs li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.rep-err-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.rep-section .rep-blurb { margin: 2px 0 10px; max-width: 70ch; }
.rep-when { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--mist); font-size: 13.5px; }
.rep-when strong { color: var(--white); font-weight: 600; }
.rep-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; background: var(--panel); }
.rep-list li + li { border-top: 1px solid var(--line-soft); }
.rep-link { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--text); font-size: 13.5px; }
.rep-link .ic { color: var(--accent); flex: none; }
.rep-link .dim { margin-left: auto; }
.rep-link:hover { background: var(--row-hover); color: var(--white); }
.rep-when-pick { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 0.8fr) minmax(0, 1.6fr); align-items: center; gap: 8px; }
.rep-hook-tools:empty { display: none; }
.rep-hook-tools { margin-top: 8px; }
.rep-newhook { margin-top: -4px; }

/* ---------- player surveys: in brief on the game page, in full on the update's page ---------- */
.g-surveys > .row-between { margin-bottom: 12px; align-items: flex-start; }
.sv-open, .sv-closed { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; }
.sv-open { color: var(--mint); background: rgba(var(--fg-rgb), 0.05); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.08); }
.sv-closed { color: var(--dim); box-shadow: inset 0 0 0 1px var(--line-soft); }
.sv-summary { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: var(--mist); font-size: 13px; }
.sv-mean { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.sv-mean-n { color: var(--white); font-size: 26px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.sv-mean-n.small-n { font-size: 17px; }
/* the game page: the newest survey in a well, then the earlier ones as rows, each opening its update */
.sv-brief { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--well); }
.sv-brief-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.sv-brief-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.sv-brief-name { color: var(--white); font-size: 15px; font-weight: 600; }
.sv-brief-figs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; color: var(--mist); font-size: 13px; }
.sv-brief-fig .mono { color: var(--white); font-size: 15px; font-weight: 600; }
.sv-brief-figs .g-delta { font-size: 12.5px; }
.sv-brief-go { display: inline-flex; align-items: center; gap: 2px; width: max-content; margin-top: 2px; }
.sv-older { margin-top: 14px; }
.sv-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sv-list > li { border-top: 1px solid var(--line-soft); }
.sv-old-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 6px; border-radius: 6px; color: var(--text); }
a.sv-old-row:hover { background: var(--row-hover); color: var(--white); }
.sv-old-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.sv-old-score { color: var(--mist); font-size: 13px; white-space: nowrap; }
.sv-old-score .mono { color: var(--text); }
.sv-old-when { margin-left: auto; white-space: nowrap; }
.sv-old-row > svg { flex: none; align-self: center; color: var(--dim); }
/* the update's page: the figures split by hairlines, then a card a question (a 1 to 5 one across the whole width) */
.sv-full { display: grid; gap: 18px; }
.sv-full-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; }
.sv-full-head h2 { display: flex; align-items: center; gap: 10px; }
.sv-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.sv-fig { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 2px 18px; border-left: 1px solid var(--line-soft); }
.sv-fig:first-child { padding-left: 0; border-left: 0; }
.sv-fig dt { color: var(--mist); font-size: 12.5px; }
.sv-fig dd { display: flex; align-items: baseline; gap: 4px; margin: 0; }
.sv-fig-n { color: var(--white); font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sv-fig-of { color: var(--dim); font-size: 13px; }
.sv-fig .g-delta { font-size: 12.5px; }
.g-delta a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
.g-delta .sv-by { white-space: nowrap; }
.g-delta .sv-on { margin-left: 4px; font-family: var(--sans); font-weight: 400; }
.sv-qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 14px; }
.sv-q-card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--well); }
.sv-q-card.wide { grid-column: 1 / -1; }
.sv-q-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px; }
.sv-q-n { color: var(--dim); font-size: 12px; }
.sv-q-t { margin: 0; color: var(--white); font-size: 14.5px; font-weight: 600; }
.sv-q-count { white-space: nowrap; }
.sv-scale { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 22px; }
.sv-scale-mean { display: grid; justify-items: start; gap: 2px; }
.sv-scale-n { color: var(--white); font-size: 44px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.sv-scale-mean .g-delta { margin-top: 6px; font-size: 12.5px; }
/* bars: the chart colour; a 1 to 5 one's 3 and a choice's others quieter, its 1 and 2 in the late red */
.sv-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sv-hbars li { display: grid; grid-template-columns: minmax(80px, 34%) minmax(0, 1fr) 34px 42px; align-items: center; gap: 10px; font-size: 13px; }
.sv-hbar-l { color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-hbar { display: block; height: 12px; border-radius: 4px; background: rgba(var(--fg-rgb), 0.05); overflow: hidden; }
.sv-hbar > span { display: block; height: 100%; border-radius: 4px; background: var(--chart); }
.sv-hbars li.mid .sv-hbar > span, .sv-hbars li.rest .sv-hbar > span { background: color-mix(in srgb, var(--chart) 50%, transparent); }
.sv-hbars li.neg .sv-hbar > span { background: color-mix(in srgb, var(--late) 70%, transparent); }
.sv-hbar-n { text-align: right; color: var(--text); }
.sv-hbar-p { text-align: right; font-size: 12px; }
/* a free answer: the words as filters, then the answers as quotes */
.sv-words-l { margin: -4px 0 -6px; }
.sv-words { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sv-word { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; border: 0; border-radius: 6px; background: rgba(var(--fg-rgb), 0.05);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.sv-word:hover { background: rgba(var(--fg-rgb), 0.09); color: var(--white); }
.sv-word[aria-pressed="true"] { background: rgba(var(--glow-rgb), 0.12); box-shadow: inset 0 0 0 1px var(--accent); color: var(--white); }
.sv-word .mono { color: var(--dim); font-size: 11.5px; }
.sv-answers { display: grid; gap: 8px; }
.sv-texts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 520px; overflow: auto; }
.sv-texts li { padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(var(--fg-rgb), 0.03); color: var(--text);
  font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sv-times { float: right; margin-left: 10px; color: var(--dim); font-size: 12px; }
.sv-texts mark { padding: 0 2px; border-radius: 3px; background: rgba(var(--glow-rgb), 0.18); color: var(--white); }
.sv-filter { margin: 0; }
.sv-more { width: max-content; }
@media (max-width: 600px) {
  .sv-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .sv-fig:nth-child(odd) { padding-left: 0; border-left: 0; }
  .sv-scale { grid-template-columns: 1fr; gap: 14px; }
  .sv-scale-mean { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .sv-scale-mean .g-delta { margin-top: 0; }
  .sv-hbars li { grid-template-columns: minmax(70px, 38%) minmax(0, 1fr) 28px 38px; gap: 8px; }
}
/* the settings: when, the channel, the questions */
.sv-when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sv-unit { display: flex; align-items: center; gap: 8px; color: var(--mist); font-size: 13px; }
.sv-num { width: 84px; }
.sv-qedit { display: grid; gap: 8px; }
.sv-qedit-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--well); }
.sv-qedit-n { color: var(--dim); padding-top: 9px; text-align: center; }
.sv-qedit-main { display: grid; gap: 8px; min-width: 0; }
.sv-qedit-top { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto 32px; gap: 8px; align-items: center; }
.sv-qedit-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rep-sv { display: grid; gap: 4px; margin-bottom: 10px; }
.rep-sv-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rep-sv-name { color: var(--white); font-weight: 600; }

/* ---------- the public survey form (players, no account) ---------- */
.sv { min-height: 100vh; display: grid; place-items: start center; padding: 40px 16px 32px; }
.sv-card { width: min(560px, 100%); display: grid; gap: 18px; padding: 28px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 24px 60px -30px rgba(var(--shade-rgb), calc(0.8 * var(--shade-k))); }
.sv-head { display: flex; align-items: center; gap: 14px; }
.sv-head h1 { font-size: 21px; line-height: 1.25; }
.sv-game { color: var(--mist); font-size: 13.5px; margin-bottom: 2px; }
.sv-intro { color: var(--text); font-size: 15px; }
.sv-form { display: grid; gap: 22px; }
.sv-q { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sv-q-text { color: var(--white); font-size: 15px; font-weight: 600; padding: 0; }
.sv-req { color: var(--accent); }
.sv-opts { display: grid; gap: 8px; }
.sv-opts.scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sv-opt { position: relative; display: block; cursor: pointer; }
.sv-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sv-opt span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--well); color: var(--text); font-size: 15px; font-weight: 600; transition: border-color 0.15s, background 0.15s; }
.sv-opts:not(.scale) .sv-opt span { justify-content: flex-start; font-weight: 500; }
.sv-opt:hover span { border-color: var(--accent); }
.sv-opt input:checked + span { border-color: var(--accent); background: rgba(var(--sel-rgb), 0.16); color: var(--white); }
.sv-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sv-ends { display: flex; justify-content: space-between; gap: 12px; color: var(--dim); font-size: 12.5px; }
.sv-count { justify-self: end; color: var(--dim); font-size: 11.5px; margin-top: -4px; }
.sv-hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.sv-note { color: var(--dim); font-size: 12.5px; }
.sv-send { justify-self: stretch; min-height: 46px; font-size: 15px; }
.sv-msg { color: var(--mist); font-size: 15px; }
.sv-thanks { display: grid; gap: 4px; padding: 10px 0; }
.sv-big { color: var(--white); font-size: 28px; font-weight: 600; }
.sv-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.sv-foot a { color: var(--dim); }
.sv-foot a:hover { color: var(--white); }
.sv-brand { display: inline-flex; align-items: center; gap: 6px; }

/* a game's Releases tab: the next update so far, then every version grouped under the update it went into */
.rels-tab { display: grid; gap: 16px; }
.rels-tab .panel + .panel { margin-top: 0; }
@container gbody (min-width: 1200px) {
  .rels-tab:has(> .rels-next) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}
.rels-next.is-empty .g-off { margin-top: 10px; }
.rels-next .row-between { align-items: flex-start; margin-bottom: 6px; }
.rels-next .g-sub, .rel-cards-panel .g-sub { margin-top: 14px; }
.rels-sub-link { color: inherit; }
.rels-sub-link:hover { color: var(--accent); }
.rels-groups { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rels-group { padding: 4px 6px 6px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--well); min-width: 0; }
.rels-group.is-next { border-style: dashed; background: none; }
/* the versions from before rainydays watched the game: in no update, quieter still */
.rels-group.is-early { border-style: dashed; border-color: rgba(var(--fg-rgb), 0.08); background: none; }
.rels-group.is-early .rels-next-head { color: var(--mist); font-weight: 500; }
.rels-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px; border-radius: 8px; color: var(--text); font-size: 13.5px; }
.rels-row:hover { background: rgba(var(--fg-rgb), 0.04); }
.rels-row:hover .rel-v, .rels-row:hover .rels-name { color: var(--accent); }
.rels-row time { margin-left: auto; color: var(--dim); font-size: 12.5px; white-space: nowrap; }
.rels-row.is-update { font-size: 14.5px; }
.rels-name { min-width: 0; color: var(--white); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rels-star { display: inline-flex; color: var(--accent); flex: none; }
.rels-next-head { margin: 0; padding: 7px 8px 3px; color: var(--white); font-weight: 600; font-size: 13.5px; }
.rels-patches { list-style: none; margin: 0 0 2px 17px; padding: 0 0 0 9px; border-left: 1px solid var(--line-soft); display: grid; grid-template-columns: minmax(0, 1fr); }
.rels-group.is-next .rels-patches, .rels-group.is-early .rels-patches { margin-left: 8px; }
.rels-quiet > summary { width: max-content; padding: 5px 8px; color: var(--dim); font-size: 12.5px; cursor: pointer; }
.rels-quiet > summary:hover { color: var(--white); }
.rels-quiet-list { margin: 0; padding: 0 8px 6px; color: var(--dim); font-size: 12.5px; line-height: 1.7; }
.rels-quiet-list a { color: var(--mist); }
.rels-quiet-list a:hover { color: var(--accent); }

/* one release's page */
.release-body { display: grid; gap: 0; }
.rel-head { align-items: flex-start; }
.rel-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; overflow-wrap: anywhere; }
.rel-title .kind { font-size: 12px; min-height: 22px; }
.rel-actions { flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.rel-plan { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; color: var(--mist); font-size: 13.5px; max-width: 72ch; }
.rel-plan .ic { flex: none; margin-top: 2px; color: var(--accent); }
.release-body .panel { margin-top: 0; }
.rel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.rel-impact + .rel-grid, .release-body > .sv-full + .rel-grid, .rel-impact + .sv-full { margin-top: 16px; }
.rel-main, .rel-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
@container gbody (min-width: 1200px) {
  .rel-grid { grid-template-columns: minmax(0, 1fr) 460px; }
  .rel-side { position: sticky; top: 20px; }
  .rel-side .rep-table th, .rel-side .rep-table td { padding: 8px 10px; }
}
.rel-survey .panel-sub { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

/* a game's alerts: the banner over its page while one is going on, and its Settings tab (alerts.js) */
.al-banner { display: flex; align-items: center; gap: 10px; margin: -8px 0 18px; padding: 10px 14px; border-radius: 10px; background: var(--bad-wash);
  border: 1px solid color-mix(in srgb, var(--late) 45%, transparent); color: var(--text); font-size: 13.5px; text-decoration: none; }
.al-banner > .ic:first-child { flex: none; color: var(--late); }
.al-banner > .ic:last-child { flex: none; margin-left: auto; color: var(--dim); }
.al-banner strong { color: var(--late); font-weight: 600; }
.al-banner:hover { border-color: var(--late); }
.al-banner-text { min-width: 0; overflow-wrap: anywhere; }
.al-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--late); margin-left: 2px; }
.al-tab { display: grid; gap: 16px; }
@container gbody (min-width: 1200px) {
  .al-tab { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.al-tab .panel { margin: 0; }
.al-panel > .row-between { flex-wrap: nowrap; align-items: flex-start; }
.al-panel .panel-sub { margin-bottom: 4px; }
.al-rules { list-style: none; margin: 0; padding: 0; }
.al-rule { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.al-rule:first-child { border-top: 0; }
.al-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(var(--sel-rgb), 0.1); color: var(--accent); }
.al-main { min-width: 0; display: grid; gap: 3px; }
.al-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.al-name { font-weight: 600; color: var(--text); }
.al-state { font-family: var(--mono); font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--mist); }
.al-state.good { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
.al-state.bad { color: var(--late); border-color: color-mix(in srgb, var(--late) 50%, transparent); background: var(--bad-wash); }
.al-state.wait { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.al-state.off { color: var(--dim); }
.al-about { color: var(--mist); font-size: 13.5px; line-height: 1.7; max-width: 70ch; }
.al-about strong { color: var(--text); font-weight: 600; }
.al-about .small-select { padding: 2px 26px 2px 8px; margin: 0 2px; }
.al-min { width: 96px; padding: 2px 8px; margin: 0 2px; display: inline-block; }
.al-now { color: var(--dim); font-size: 12.5px; font-family: var(--mono); max-width: 70ch; }
.al-switch { margin-top: 6px; }
.al-switch input { width: 18px; height: 18px; }
.al-mine { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.al-mine .dim { padding-left: 24px; }
.al-channel { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.al-channel .g-sub { margin-top: 0; }
.al-channel .panel-sub { margin-bottom: 0; }
.al-list { list-style: none; margin: 0; padding: 0; }
.al-item { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.al-item:first-child { border-top: 0; }
.al-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); transform: translateY(-1px); }
.al-dot.now { background: var(--late); box-shadow: 0 0 0 3px var(--bad-wash); }
.al-item-main { min-width: 0; display: grid; gap: 2px; font-size: 13.5px; }
.al-item-top { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .game-grid { grid-template-columns: minmax(0, 1fr); }
  .game-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .g-hero-n { font-size: 40px; }
  .sv-when { grid-template-columns: minmax(0, 1fr); }
  .sv-qedit-top { grid-template-columns: minmax(0, 1fr) 32px; }
  .sv-qedit-top select { grid-column: 1; }
  .sv { padding: 16px 10px; }
  .sv-card { padding: 20px 16px; }
  .rep-when-pick { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .rep-table th, .rep-table td { padding: 8px 10px; }
}
@media (max-width: 560px) {
  /* a phone keeps the week and its change; last week's number is in the change */
  .rep-table tr > :nth-child(3) { display: none; }
  .rep-when-pick select[name=tz] { grid-column: 1 / -1; }
  .g-now { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "rating" "facts"; row-gap: 14px; }
  .g-now:not(:has(> .g-rating)) { grid-template-areas: "hero" "facts"; }
  .g-now .g-facts { margin-top: 0; }
  .g-rating { width: 100%; }
  .err-row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "n text" "sev act"; row-gap: 4px; }
  .err-n { grid-area: n; }
  .err-text { grid-area: text; }
  .err-sev { grid-area: sev; justify-self: end; }
  .err-row > :last-child { grid-area: act; justify-self: start; }
  .err-body { padding-left: 14px; }
  /* an update's name gets its own line; a card's board sits under it */
  .rels-row.is-update { flex-wrap: wrap; row-gap: 4px; }
  .rels-row.is-update .rels-name { flex: 1 1 calc(100% - 30px); white-space: normal; overflow-wrap: anywhere; }
  .rels-row.is-update .rel-v { margin-left: 24px; }
  .rel-card-board { flex-basis: 100%; margin-left: 0; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  .gcard, .chart-bar { transition: none; }
  .gcard:hover { transform: none; }
}

/* ---------- events, Roblox's incidents and what a release did ---------- */

/* on the charts: an incident is red stripes under the data; an event is a rule in its colour under the baseline,
   named in a key under the chart, and the one hovered, focused or picked has its days shaded in its colour, edged
   where it really starts and ends */
.chart-hatch-bg { fill: var(--late); fill-opacity: 0.05; }
.chart-hatch { stroke: var(--late); stroke-opacity: 0.32; stroke-width: 1.2; }
.chart-ev-hot { fill: var(--ink); fill-opacity: 0.08; }
[data-theme="light"] .chart-ev-hot { fill: var(--fill); fill-opacity: 0.1; }
.chart-ev-edge { stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1; shape-rendering: crispEdges; }
[data-theme="light"] .chart-ev-edge { stroke: var(--fill); }
.chart-tip-span { display: inline-block; flex: none; width: 14px; height: 3px; border-radius: 1.5px; background: var(--ink); }
[data-theme="light"] .chart-tip-span { background: var(--fill); }

.chart-ev-rule { fill: var(--ink); fill-opacity: 0.9; shape-rendering: crispEdges; }
[data-theme="light"] .chart-ev-rule { fill: var(--fill); fill-opacity: 1; }
.chart-ev-rule.dim { fill-opacity: 0.3; }
.chart-key { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; margin-left: 44px; }
.chart-key-head { color: var(--dim); font-size: 12px; margin-right: -6px; }
.chart-key-item { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px 8px; margin-left: -8px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.chart-key-item:hover, .chart-key-item.on { background: var(--row-hover); }
.chart-key-item[aria-pressed="true"] { background: var(--row-hover); box-shadow: inset 0 0 0 1px var(--line-soft); }
.chart-plot.on-rule { cursor: pointer; }
.chart-key-swatch { flex: none; width: 14px; height: 3px; border-radius: 1.5px; background: var(--ink); }
[data-theme="light"] .chart-key-swatch { background: var(--fill); }
.chart-key-name { font-size: 12.5px; font-weight: 500; }
.chart-key-when { color: var(--dim); font-size: 12px; }
.chart-key-chips { display: inline-flex; align-items: center; gap: 6px; }
.chart-key-so { color: var(--dim); font-size: 12px; }
@media (max-width: 560px) {
  .chart-key { margin-left: 0; display: grid; gap: 2px; }
  .chart-key-head { margin: 0 0 2px; }
  .chart-key-item { flex-wrap: wrap; margin-left: 0; }
}
.chart-tip-span.outage, .g-note-key.outage, .cal-dot.outage, .cal-bar.outage {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--late) 55%, transparent) 0 2px, color-mix(in srgb, var(--late) 12%, transparent) 2px 5px);
}
.g-note-key.outage { width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.chart-tip-span.outage { width: 10px; height: 10px; border-radius: 3px; }

/* while Roblox reports trouble: amber, or red when it touches players (outages.py) */
.ro-banner { display: flex; align-items: center; gap: 10px; margin: -8px 0 18px; padding: 10px 14px; border-radius: 10px; color: var(--text); font-size: 13.5px;
  background: color-mix(in srgb, var(--warn) 9%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); text-decoration: none; }
.ro-banner > .ic:first-child { flex: none; color: var(--warn); }
.ro-banner > .ic:last-child { flex: none; margin-left: auto; color: var(--dim); }
.ro-banner strong { color: var(--warn); font-weight: 600; }
.ro-banner.bad { background: var(--bad-wash); border-color: color-mix(in srgb, var(--late) 45%, transparent); }
.ro-banner.bad > .ic:first-child, .ro-banner.bad strong { color: var(--late); }
.ro-banner:hover { border-color: var(--warn); color: var(--white); }
.ro-banner.bad:hover { border-color: var(--late); }
.ro-text { min-width: 0; overflow-wrap: anywhere; }
.ro-sub { display: block; margin-top: 2px; color: var(--mist); font-size: 12.5px; }
.stack > .ro-banner { margin: 0; }

/* changes as chips: "Players +12%", green when it's good news, red when it isn't (with an arrow, so not by colour alone) */
.imps { display: flex; flex-wrap: wrap; gap: 6px; }
.imp { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap;
  border: 0; background: none; box-shadow: inset 0 0 0 1px var(--line-soft); color: var(--mist); font-family: inherit; }
.imp .mono { font-weight: 600; }
.imp.good { color: var(--mint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 35%, transparent); }
.imp.bad { color: var(--late); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--late) 40%, transparent); }
button.imp { cursor: pointer; }
button.imp:hover { background: rgba(var(--fg-rgb), 0.04); }
.imps.big { gap: 8px; margin-top: 4px; }
.imps.big .imp { min-height: 28px; padding: 0 11px; font-size: 13px; }
.rels-row .imps { gap: 4px; }
.rep-rel-head + .imps { gap: 4px; margin: 2px 0 4px; }
.rel-impact .row-between { align-items: baseline; }
.rel-impact-wait { display: flex; align-items: center; gap: 6px; margin: -4px 0 14px; }
.err-row.static { cursor: default; }
.err-row.static:hover { background: none; }

/* a game's Events, beside its releases */
.ev-list { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 2px; }
.ev-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px;
  background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.ev-row:hover { background: var(--row-hover); }
.ev-row .cal-dot { margin-top: 5px; }
.ev-row-text { display: grid; gap: 2px; min-width: 0; }
.ev-row-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-row .imps { margin-top: 3px; }
.ev-row-thumb { width: 48px; height: 27px; border-radius: 4px; object-fit: cover; background: var(--well); margin-top: 1px; }
.ev-rbx { display: inline-flex; margin-left: 6px; color: var(--accent); vertical-align: -1px; }
.cal-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--ink); }
.cal-dot.rel { display: inline-grid; place-items: center; background: rgba(var(--glow-rgb), 0.16); color: var(--accent); }

/* an event's or incident's details, in a popover */
.ev-card { display: grid; gap: 8px; padding: 4px 2px; }
.ev-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--white); }
.ev-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--well); }
.ev-pill { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 11.5px; line-height: 1.5; padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--mist); white-space: nowrap; }
.ev-pill.rbx { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ev-pill.bad { color: var(--late); border-color: color-mix(in srgb, var(--late) 45%, transparent); }
.ev-pill.wait { color: var(--dim); }
.ev-subtitle { margin: -4px 0 0; color: var(--text); font-size: 13px; }
.ev-repeat { display: inline-flex; align-items: center; gap: 5px; }
.ev-desc { border-left: 2px solid var(--line); padding-left: 8px; }
.ev-card-head strong { font-weight: 600; overflow-wrap: anywhere; }
.ev-notes { color: var(--mist); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ev-sub { color: var(--dim); font-size: 12px; }
.ev-table th, .ev-table td { padding: 5px 8px; font-size: 12.5px; }
.ev-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }  /* (as .st-two: fields keep their own height) */
.ev-scope .row { gap: 16px; }
/* planning an event: putting it on Roblox, and its thumbnail */
.ev-roblox-wrap { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--well); }
.ev-on-roblox { font-weight: 600; color: var(--text); }
.ev-on-roblox .ic { color: var(--accent); vertical-align: -2px; }
.ev-roblox { margin-top: 4px; }
/* the thumbnail: the chosen one beside what it is, chips, then the gallery, which scrolls in its own box (a grid that
   scrolled itself had its rows squashed into each other once there were many) */
.ev-thumb-field { gap: 10px; }
.ev-pick { display: grid; grid-template-columns: 192px minmax(0, 1fr); align-items: center; gap: 14px; }
.ev-pick-img { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--well); }
.ev-pick-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-pick-text { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.ev-pick-text strong { color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
.ev-pick-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-pick-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.05); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.ev-pick-tab:hover { background: rgba(var(--fg-rgb), 0.09); color: var(--white); }
.ev-pick-tab[aria-pressed="true"] { background: rgba(var(--glow-rgb), 0.12); box-shadow: inset 0 0 0 1px var(--accent); color: var(--white); }
.ev-pick-tab .mono { color: var(--dim); font-size: 11.5px; }
.ev-gallery { max-height: min(46vh, 380px); overflow: auto; padding: 3px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--well); }
.ev-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 10px; align-content: start; padding: 6px; }
.ev-tile { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 2px solid var(--line-soft); border-radius: 8px;
  background: var(--panel); cursor: pointer; overflow: hidden; }
.ev-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-tile:hover { border-color: var(--line); }
.ev-tile.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ev-tile-none { display: grid; place-items: center; height: 100%; padding: 4px; color: var(--dim); font-size: 12px; text-align: center; }
.ev-tile-flag { position: absolute; left: 4px; top: 4px; padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 10.5px; }
/* what a tile is, along its foot: shown on hover, on the keyboard and for the chosen one */
.ev-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); color: #fff; font-size: 11px; text-align: left; opacity: 0; transition: opacity 0.15s; }
.ev-tile:hover .ev-tile-cap, .ev-tile:focus-visible .ev-tile-cap, .ev-tile.on .ev-tile-cap { opacity: 1; }
@media (hover: none) { .ev-tile-cap { opacity: 1; } }
@media (max-width: 600px) {
  .ev-pick { grid-template-columns: 128px minmax(0, 1fr); gap: 10px; }
  .ev-thumbs { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
}
.ev-thumb-tools { align-items: flex-start; flex-wrap: nowrap; gap: 10px; }
.ev-thumb-tools .hint { flex: 1; }

/* a team's calendar (calendar.js): a month of weeks, each a grid of seven days with its events as bars across them */
.cal-tab { display: grid; gap: 16px; }
.cal-head { margin-bottom: 4px; }
.cal-head h2 { min-width: 9.5em; }
.cal-nav { gap: 4px; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 12px; }
.cal-legend .cal-dot { margin-left: 4px; }
.cal-legend .cal-rel { margin-left: 6px; }
.cal-grid { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; background: var(--well); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line-soft); }
.cal-weekdays span { padding: 6px 8px; color: var(--dim); font-family: var(--mono); font-size: 11.5px; }
.cal-week { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 3px; min-height: 104px; padding-bottom: 4px; }
.cal-week + .cal-week { border-top: 1px solid var(--line-soft); }
.cal-day { position: relative; z-index: 0; min-width: 0; padding: 4px 6px; display: flex; flex-direction: column; }
.cal-day + .cal-day { border-left: 1px solid var(--line-soft); }
.cal-day.other { background: rgba(var(--fg-rgb), 0.02); }
.cal-day.other .cal-n { color: var(--dim); opacity: 0.6; }
.cal-day-head { display: flex; align-items: center; gap: 4px; min-height: 22px; flex-wrap: nowrap; overflow: hidden; }
.cal-n { font-family: var(--mono); font-size: 12px; color: var(--mist); min-width: 18px; }
.cal-day.today .cal-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 999px; background: var(--btn); color: var(--on); font-weight: 600; }
.cal-rel { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--line-soft); white-space: nowrap; }
.cal-rel.update { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--glow-rgb), 0.3); }
.cal-rel:hover { color: var(--white); }
.cal-more { font-size: 11px; color: var(--dim); }
.cal-hidden { margin-top: auto; align-self: flex-start; border: 0; background: none; padding: 0 2px; cursor: pointer; }
.cal-hidden:hover { color: var(--white); text-decoration: underline; }
.cal-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; min-width: 0; height: 22px; margin: 0 4px; padding: 0 8px; border: 0; border-radius: 6px; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--fill) 45%, var(--panel-ring)); color: color-mix(in srgb, var(--ink) 60%, white); font: inherit; font-size: 12px; font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.cal-bar span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-bar > .ic { flex: none; opacity: 0.85; }
.cal-bar:hover { background: color-mix(in srgb, var(--fill) 58%, var(--panel-ring)); }
.cal-bar.cont-l { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-bar.cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-bar.outage { color: var(--late); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--late) 40%, transparent);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--late) 20%, transparent) 0 2px, color-mix(in srgb, var(--late) 6%, transparent) 2px 6px); }
.cal-bar.outage span { text-shadow: 0 0 6px var(--panel-ring), 0 0 2px var(--panel-ring); }
[data-theme="light"] .cal-bar:not(.outage) { background: color-mix(in srgb, var(--fill) 16%, white); color: color-mix(in srgb, var(--fill) 80%, black); }
.cal-day-list { display: grid; gap: 1px; }
.cal-day-list .cal-dot { margin-right: 2px; }
.cal-agenda { margin-top: 18px; }
.cal-ag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.cal-ag-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px;
  background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.cal-ag-row:hover { background: var(--row-hover); }
.cal-ag-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-roblox { flex-wrap: wrap; }
.rep-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.rep-events li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 760px) {
  /* a phone reads the month as the list under the grid: the bars keep their colour, not their words */
  .cal-week { min-height: 76px; }
  .cal-bar { margin: 0 1px; padding: 0; height: 8px; }
  .cal-bar span, .cal-bar > .ic, .cal-rel, .cal-day-head .cal-more { display: none; }
  .cal-weekdays span { padding: 6px 4px; text-align: center; }
  .cal-day { padding: 4px 3px; }
  .cal-ag-row { grid-template-columns: auto minmax(0, 1fr); }
  .cal-ag-row > .dim { grid-column: 2; }
  .ev-times { grid-template-columns: 1fr; }
}

/* ---------- Best time to ship: each hour of the week as a cell, in the chart colour by its busiest players ---------- */
.when-wrap { position: relative; margin-top: 14px; }
.when-grid {
  display: grid; gap: 2px; outline: none; border-radius: 8px;
  grid-template-columns: 38px repeat(24, minmax(0, 1fr)); grid-template-rows: repeat(7, 22px) 18px;
}
.when-grid:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.when-day { grid-row: calc(var(--d) + 1); grid-column: 1; align-self: center; color: var(--dim); font-size: 12px; }
.when-hour { grid-row: 8; grid-column: calc(var(--h) + 2) / span 3; align-self: end; color: var(--dim); font-size: 10.5px; }
.when-cell {
  grid-row: calc(var(--d) + 1); grid-column: calc(var(--h) + 2); position: relative; border-radius: 4px;
  background: color-mix(in srgb, var(--chart) var(--p, 0%), var(--well));
}
.when-cell.none { background: var(--well); box-shadow: inset 0 0 0 1px var(--line-soft); }
.when-cell.skipped { background: repeating-linear-gradient(45deg, transparent 0 3px, var(--line-soft) 3px 4px); box-shadow: none; }
.when-cell.on { box-shadow: 0 0 0 2px var(--white); z-index: 1; }
.when-mark { position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 1.5px var(--panel); }
.when-mark.key { position: static; display: inline-block; margin-right: 6px; vertical-align: 1px; background: var(--text); box-shadow: none; }
.when-tip {
  position: absolute; z-index: 5; display: grid; gap: 2px; width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--pop); color: var(--dim); font-size: 12px; pointer-events: none;
  box-shadow: 0 10px 24px -12px rgba(var(--shade-rgb), calc(0.7 * var(--shade-k)));
}
.when-tip strong { color: var(--white); font-weight: 600; }
.when-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 10px; }
.when-scale { display: inline-flex; align-items: center; gap: 8px; }
.when-ramp { width: 96px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--chart) 8%, var(--well)), var(--chart)); }
.when-advice { display: grid; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.when-advice > div { display: grid; grid-template-columns: 128px 1fr; gap: 12px; font-size: 13.5px; }
.when-advice dt { color: var(--dim); }
.when-advice dd { margin: 0; color: var(--text); }
/* a wide game page: the advice beside the hours, set off by a hairline, or with none yet, taller hours across the
   panel so they don't turn to strips */
@container gmain (min-width: 1140px) {
  .when:has(> .when-advice) { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .when:has(> .when-advice) > * { grid-column: 1 / -1; }
  .when:has(> .when-advice) > .g-head-sub, .when:has(> .when-advice) > .when-wrap, .when:has(> .when-advice) > .when-legend { grid-column: 1; }
  .when > .when-advice { grid-column: 2; grid-row: 2 / span 3; align-self: center; margin: 0; padding: 4px 0 4px 28px; border-top: 0; border-left: 1px solid var(--line-soft); }
  .when-advice > div { grid-template-columns: 112px 1fr; }
  .when:not(:has(> .when-advice)) .when-grid { grid-template-rows: repeat(7, 28px) 18px; }
}
/* a phone: the week turned on its side, a column a day */
@media (max-width: 560px) {
  .when-grid { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); grid-template-rows: 18px repeat(24, 15px); }
  .when-day { grid-row: 1; grid-column: calc(var(--d) + 2); justify-self: center; align-self: end; font-size: 11px; }
  .when-hour { grid-row: calc(var(--h) + 2) / span 3; grid-column: 1; align-self: start; font-size: 10.5px; }
  .when-cell { grid-row: calc(var(--h) + 2); grid-column: calc(var(--d) + 2); border-radius: 3px; }
  .when-mark { top: 2px; right: 2px; width: 4px; height: 4px; }
  .when-advice > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- a game the team watches ---------- */
.rv-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--mist); }
.rival-main { display: grid; gap: 16px; min-width: 0; }
.rival-main .panel + .panel { margin-top: 0; }
@container gbody (min-width: 1200px) {
  .rival-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rv-chart-head { align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rv-chart-head .g-chart-title { margin-bottom: 0; }
.rv-compare { display: inline-flex; align-items: center; gap: 8px; }
.rv-compare .rv-select { width: auto; min-width: 0; max-width: 220px; padding-top: 5px; padding-bottom: 5px; font-size: 13px; border-radius: 7px; }
.g-note .chart-tip-dash { margin: 0 6px 0 4px; }

/* the Games tab's competitors: a heading with what they're for, or until there's one, a card saying so */
.g-watch-head { align-items: flex-start; gap: 12px; }
.g-watch-head .section-title { margin-bottom: 2px; }
.g-watch-head .g-head-sub { margin: 0 0 12px; }
.g-watch-empty {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px;
  border: 1px dashed var(--line); background: var(--well);
}
.g-watch-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; color: var(--accent); background: rgba(var(--sel-rgb), 0.1); }
.g-watch-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.g-watch-text h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--white); }
.g-watch-text p { margin: 0; color: var(--mist); font-size: 13.5px; line-height: 1.5; }
.g-watch-empty .btn { flex: none; }
@media (max-width: 560px) {
  .g-watch-empty { flex-wrap: wrap; }
  .g-watch-text { flex-basis: calc(100% - 60px); }
}

/* ---------- a game's Store tab: its sales, its passes and products, Robux and changes ---------- */
.st-tab { display: grid; gap: 16px; min-width: 0; }
.st-head { align-items: flex-start; gap: 12px; }
.st-head h2 { margin: 0; }
.st-head .panel-sub { margin: 4px 0 0; }
.st-sale-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap: 8px 12px; }
.st-sale { display: flex; align-items: center; gap: 10px; }
.st-sale-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-align: left;
  border: 1px solid var(--line-soft); background: var(--well); color: var(--text); font: inherit; cursor: pointer;
}
.st-sale-main:hover { border-color: var(--line); }
.st-sale-main > .ic { margin-left: auto; color: var(--dim); flex: none; }
.st-sale-text { display: grid; min-width: 0; flex: 1; }
.st-sale-name { color: var(--white); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pill { flex: none; font-family: var(--mono); font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--mist); }
.st-pill.live { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
.st-pill.wait { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.st-pill.done { color: var(--dim); }
.st-bad { display: inline-flex; align-items: center; gap: 4px; color: var(--late); }
/* the game's key can't run sales (or not for one kind): what's missing, and what fixes it */
.st-warn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); color: var(--text); }
.st-warn > .ic { color: var(--warn); margin-top: 2px; }
.st-warn-text { display: grid; gap: 6px; min-width: 0; }
.st-warn-text p { margin: 0; }
.st-warn-text code { font-size: 12px; }
.st-warn-actions { gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.st-past { margin-top: 12px; }
.st-past summary { cursor: pointer; color: var(--mist); font-size: 13px; }
.st-group + .st-group { margin-top: 6px; }
.st-group .g-sub .count { margin-left: 6px; font-family: var(--mono); font-weight: 400; color: var(--dim); }
.st-tools { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.st-search { width: 220px; padding: 6px 10px 6px 32px; font-size: 13.5px; }
/* for sale, off sale (folded), gone (folded) */
.st-fold + .st-fold { margin-top: 10px; }
.st-part { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; color: var(--mist); font-size: 12.5px; font-weight: 600; }
.st-part .count { font-family: var(--mono); font-weight: 400; color: var(--dim); }
summary.st-part { cursor: pointer; margin: 0; padding: 4px 0; list-style: none; }
summary.st-part::-webkit-details-marker { display: none; }
summary.st-part .ic { align-self: center; color: var(--dim); transition: transform 0.15s; }
details.st-fold[open] > summary.st-part .ic { transform: rotate(90deg); }
details.st-fold[open] > summary.st-part { margin-bottom: 6px; }
/* the items in as many columns as fit (a search hides rows with [hidden], app.css, and the rest close up) */
.st-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); column-gap: 28px; }
.st-list > li { display: grid; } /* (each row as tall as the tallest in its line, so their hairlines meet) */
.st-item { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border: 0; border-bottom: 1px solid var(--line-soft); min-width: 0;
  width: 100%; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.st-item:hover { background: var(--well); }
.st-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.st-item.gone { opacity: 0.55; }
.st-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 3px 0 1px; }
.st-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; line-height: 1.5; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--mist); white-space: nowrap; }
.st-tag.for { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
.st-tag.off, .st-tag.gone { color: var(--dim); }
.st-tag.sale { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.st-tag.sale.soon { background: none; }
.st-icon { width: 36px; height: 36px; border-radius: 9px; flex: none; object-fit: cover; background: var(--well); }
.st-icon.none { display: grid; place-items: center; color: var(--dim); border: 1px solid var(--line-soft); }
.st-icon.sm { width: 28px; height: 28px; border-radius: 7px; }
.st-item-text { flex: 1; display: grid; min-width: 0; }
.st-item-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-price { color: var(--white); font-size: 13.5px; white-space: nowrap; }
.st-onsale { display: grid; justify-items: end; flex: none; }
.st-price-row { display: inline-flex; align-items: baseline; gap: 8px; }
.st-onsale .st-price { color: var(--mint); }
.st-was { color: var(--dim); font-size: 12px; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-table th { text-align: left; color: var(--dim); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.st-table td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.st-block { display: block; }
.st-state { font-weight: 500; }
.st-state.on, .st-state.done { color: var(--mint); }
.st-state.failed, .st-state.stuck { color: var(--late); }
.st-state.changed, .st-state.skipped { color: var(--warn); }
.st-changes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--mist); }
/* the store's changes in two columns on a wide page, newest at the top of the first */
@container gbody (min-width: 1200px) {
  .st-history .st-changes { display: block; columns: 2; column-gap: 40px; }
  .st-history .st-changes li { break-inside: avoid; margin-bottom: 6px; }
}
.st-changes li { display: flex; gap: 12px; }
.st-changes strong { color: var(--text); font-weight: 600; }
.st-when { flex: none; width: 64px; }
/* planning a sale */
.st-new { max-width: 760px; }
.st-pick { display: grid; max-height: 320px; overflow: auto; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--well); }
.st-pick-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto minmax(0, 1.1fr); align-items: center; gap: 10px; padding: 8px 12px;
  border-top: 1px solid var(--line-soft); cursor: pointer; }
.st-pick-row:first-child { border-top: 0; }
.st-pick-row input[type="checkbox"] { accent-color: var(--accent-d); width: 16px; height: 16px; }
.st-pick-text { display: grid; min-width: 0; }
.st-out { display: grid; justify-items: end; text-align: right; min-width: 0; color: var(--text); }
.st-out .st-block { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.st-out .st-note { white-space: normal; }
.st-pick-find { margin-bottom: 8px; }
.st-pick-find .st-search { width: 100%; }
.st-pick-group > .st-part { margin: 0; padding: 10px 12px 4px; }
.st-pick-group + .st-pick-group { border-top: 1px solid var(--line-soft); }
.st-pick-group > .st-part .dim { font-weight: 400; }
.st-pick-row.cant { cursor: default; opacity: 0.6; }
.st-pick-none { padding: 10px 12px; margin: 0; }
/* one item on its own */
.st-detail { max-width: 720px; }
.st-detail-head { display: flex; align-items: center; gap: 12px; }
.st-detail-text { display: grid; flex: 1; min-width: 0; gap: 2px; }
.st-detail-price { font-size: 16px; }
.st-detail .g-sub { margin: 4px 0 0; }
.st-num { width: 92px; }
.st-own { width: 96px; }
.st-pct { align-items: center; gap: 8px; margin-top: 6px; color: var(--mist); font-size: 13px; }
.st-mode { grid-template-columns: 1fr 1fr; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }  /* (a field as tall as its neighbour would share the extra height between its label and input) */
.st-when-pick { gap: 16px; min-height: 40px; }
.st-mode-note { margin-top: 6px; }
.st-quick { margin-top: 6px; flex-wrap: wrap; gap: 6px; }
.st-summary { margin: 0; }
@media (max-width: 560px) {
  .st-two, .st-mode { grid-template-columns: 1fr; }
  .st-pick-row { grid-template-columns: auto auto minmax(0, 1fr); }
  .st-pick-row .st-own, .st-pick-row .st-out { grid-column: 3; justify-items: start; text-align: left; }
  .st-sale { flex-wrap: wrap; }
  .st-items > .st-head { flex-wrap: wrap; }
  .st-tools { width: 100%; justify-content: flex-start; }
  .st-tools .search-wrap { flex: 1 1 100%; }
  .st-search { width: 100%; }
}

/* the updates a team plans (releases.js), first in the Next update panel: each with its day, a bar of its cards done
   (accent on a well), what's holding it up in red, and its open cards behind a disclosure */
.plans { margin: 4px 0 6px; }
.plans .row-between { align-items: center; margin-bottom: 4px; }
.plans .g-sub { margin-top: 10px; }
.plan-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--well); }
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--white); font-weight: 600; font-size: 14px; }
.plan-name .ic { flex: none; color: var(--accent); }
.plan-when { color: var(--mist); font-size: 12.5px; }
.plan-when.late { color: var(--late); }
.plan-menu { margin-left: auto; }
.plan-bar { height: 6px; border-radius: 3px; background: rgba(var(--fg-rgb), 0.08); overflow: hidden; }
.plan-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.plan-counts { margin: 0; color: var(--mist); font-size: 12.5px; }
.plan-counts .mono { color: var(--white); }
.plan-blocking { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: var(--late); font-weight: 500; vertical-align: bottom; }
.plan-open summary { color: var(--mist); font-size: 12.5px; cursor: pointer; }
.plan-open .rel-cards { margin-top: 6px; }
.rel-planned { margin: 0 0 16px; color: var(--mist); font-size: 13.5px; max-width: 80ch; }
.rel-planned > p { margin: 0; }
.rel-planned > p .ic { margin-right: 7px; color: var(--accent); vertical-align: -2px; }
.rel-planned strong { color: var(--white); font-weight: 600; }
.rel-planned .plan-open { margin-top: 6px; }

/* the cards aimed at an event (calendar.js): how many are done, any stuck in red; once it's started with cards still
   to do, the count turns amber */
.ev-cards { margin: 0; color: var(--mist); font-size: 12.5px; }
span.ev-cards { font-size: 12px; }
.ev-cards .ic { margin-right: 5px; color: var(--mint); vertical-align: -2px; }
.ev-cards .mono { color: var(--white); }
.ev-cards.late .mono { color: var(--warn); }
.ev-stuck { color: var(--late); font-weight: 500; }