/* Rankings and a game's page.
   Workspace tokens from workspace.css and dashboard.css. No shadows, rings,
   pill radii, decorative dots or entrance animation, per DESIGN.md. */

html.ui-v2 .intel { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
html.ui-v2 .intel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
html.ui-v2 .intel-muted { color: var(--pf-dimmer); font-size: 12.5px; margin: 0; line-height: 1.65; }
html.ui-v2 .intel-basis { margin: 2px 2px 0; color: var(--pf-dimmer); font-size: 11.5px; line-height: 1.6; }
html.ui-v2 .intel-na { color: var(--pf-dimmer); font-weight: 400; font-size: 11.5px; }

/* ---------------------------------------------------------------- board */

html.ui-v2 .intel-board {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 18px; border-radius: 18px; background: var(--pf-panel);
}

/* The board's four figures are the same band as a game's headline figures. */
html.ui-v2 .intel-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
html.ui-v2 .intel-summary .intel-kpi:nth-child(4) { border-left: 1px solid var(--pf-line); }

/* One row of controls at one height: search, chart, genre. */
html.ui-v2 .intel-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 220px 200px 170px 170px; align-items: center; gap: 10px; min-width: 0; }
html.ui-v2 .intel-roblox { gap: 8px; }
html.ui-v2 .intel-roblox[hidden] { display: none; }
html.ui-v2 .intel-toolbar .pf-dd { width: 100%; min-width: 0 !important; }
html.ui-v2 .intel-toolbar .pf-dd-btn { height: 40px; font-size: 13px; }
html.ui-v2 .intel-find {
  position: relative; display: flex; align-items: center; min-width: 0; height: 40px;
  border-radius: 10px; background: var(--pf-panel-2); color: var(--pf-dimmer);
}
html.ui-v2 .intel-find svg { position: absolute; left: 11px; width: 15px; height: 15px; pointer-events: none; }
html.ui-v2 .intel-find input {
  width: 100%; height: 100%; min-width: 0; padding: 0 12px 0 34px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--pf-text); font: inherit; font-size: 13px; outline: none;
}
html.ui-v2 .intel-find input::placeholder { color: var(--pf-dimmer); }
html.ui-v2 .intel-find input:focus-visible { border-color: rgba(141, 162, 255, .5); }
html.ui-v2 .intel-find input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
html.ui-v2 .intel-count { margin-left: auto; color: var(--pf-dimmer); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Below a wide board the search takes its own row and the four pickers share the next. */
@media (max-width: 1239px) {
  html.ui-v2 .intel-toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html.ui-v2 .intel-find { grid-column: 1 / -1; }
}

/* The table scrolls inside its panel, never the page. */
html.ui-v2 .intel-scroll { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -6px; scrollbar-width: thin; }
html.ui-v2 .intel-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
html.ui-v2 .intel-table th, html.ui-v2 .intel-table td { padding: 0 10px; height: 54px; text-align: left; white-space: nowrap; vertical-align: middle; }
html.ui-v2 .intel-table thead th {
  position: sticky; top: 0; z-index: 1; height: 38px; background: var(--pf-panel);
  color: var(--pf-dimmer); font-size: 11.5px; font-weight: 520;
}
html.ui-v2 .intel-table tbody tr { cursor: pointer; }
html.ui-v2 .intel-table tbody td, html.ui-v2 .intel-table tbody th { transition: background-color 120ms ease; }
html.ui-v2 .intel-table tbody tr:hover > * { background: var(--pf-panel-2); }
html.ui-v2 .intel-table tbody tr > :first-child { border-radius: 10px 0 0 10px; }
html.ui-v2 .intel-table tbody tr > :last-child { border-radius: 0 10px 10px 0; }
html.ui-v2 .intel-table .intel-num { text-align: right; }
html.ui-v2 .intel-table .intel-strong { font-weight: 640; color: var(--pf-text); }
html.ui-v2 .intel-empty-row td { height: 90px; text-align: center; color: var(--pf-dimmer); cursor: default; }

/* Sort buttons: the label and a chevron that sits inside the button, never
   hung outside it. The sorted column is the brighter heading. */
html.ui-v2 .intel-sort {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 6px; margin: 0 -6px;
  border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
/* A figure column's heading ends exactly where its figures end: the chevron
   goes on the heading's left, so it never pushes the label off the column's
   right edge, sorted or not. */
html.ui-v2 th.intel-num .intel-sort { flex-direction: row-reverse; position: relative; }
/* Its chevron hangs in the heading's left padding, so the label alone sets
   the width a figure column needs and never runs past the figures under it. */
html.ui-v2 th.intel-num .intel-sort-mark { position: absolute; right: calc(100% - 4px); top: 50%; margin-top: -5px; }
html.ui-v2 th.intel-num .intel-sort[data-direction="asc"] .intel-sort-mark { transform: rotate(180deg); }
html.ui-v2 th.intel-num { text-align: right; }
html.ui-v2 .intel-sort-mark { width: 10px; height: 10px; flex: 0 0 10px; opacity: 0; transition: opacity 120ms ease, transform 160ms ease; }
html.ui-v2 .intel-sort:hover { color: var(--pf-text); }
html.ui-v2 .intel-sort:hover .intel-sort-mark { opacity: .5; }
html.ui-v2 .intel-sort:focus-visible { outline: none; background: var(--pf-panel-2); color: var(--pf-text); }
html.ui-v2 .intel-sort[data-on="true"] { color: #ccd5ff; }
html.ui-v2 .intel-sort[data-on="true"] .intel-sort-mark { opacity: 1; }
html.ui-v2 .intel-sort[data-direction="asc"] .intel-sort-mark { transform: rotate(180deg); }

html.ui-v2 .intel-rank { width: 44px; color: var(--pf-dimmer); font-size: 12px; }
html.ui-v2 .intel-rank-move { display: flex; align-items: center; gap: 1px; margin-top: 3px; font-size: 10.5px; font-style: normal; font-weight: 600; line-height: 1; color: var(--pf-dimmer); }
html.ui-v2 .intel-rank-move svg { width: 10px; height: 10px; flex: 0 0 auto; }
html.ui-v2 .intel-rank-move[data-direction="down"] svg { transform: rotate(180deg); }
html.ui-v2 .intel-rank-move[data-direction="up"] { color: var(--pf-good); }
html.ui-v2 .intel-rank-move[data-direction="down"] { color: #e4a283; }
/* The move has its own column, right aligned like every other figure. */
html.ui-v2 .intel-move .intel-rank-move { display: inline-flex; justify-content: flex-end; gap: 2px; margin: 0; font-size: 12px; }
html.ui-v2 .intel-move .intel-rank-move svg { width: 11px; height: 11px; }
html.ui-v2 .intel-move .intel-rank-move[data-direction="held"] { color: var(--pf-dim); font-weight: 500; }
html.ui-v2 .intel-move .intel-rank-move[data-direction="new"] { color: #ccd5ff; }
html.ui-v2 .intel-table.no-move .intel-col-move, html.ui-v2 .intel-table.no-move .intel-move { display: none; }
html.ui-v2 .intel-wait { margin: 0; padding: 22px 4px 8px; max-width: 72ch; color: var(--pf-dim); font-size: 13px; line-height: 1.65; }

html.ui-v2 .intel-table { table-layout: fixed; }
html.ui-v2 .intel-col-rank { width: 40px; }
html.ui-v2 .intel-col-move { width: 64px; }
html.ui-v2 .intel-col-trend { width: 80px; }
html.ui-v2 .intel-col-playing { width: 72px; }
html.ui-v2 .intel-col-share { width: 92px; }
html.ui-v2 .intel-col-visits { width: 68px; }
html.ui-v2 .intel-col-favourites { width: 92px; }
html.ui-v2 .intel-col-favRate { width: 56px; }
html.ui-v2 .intel-col-approval { width: 80px; }
html.ui-v2 .intel-col-servers { width: 72px; }
html.ui-v2 .intel-col-updated { width: 80px; }
html.ui-v2 .intel-col-genre { width: 108px; }
html.ui-v2 .intel-col-name { width: auto; }
html.ui-v2 .intel-game { font-weight: 400; overflow: hidden; }
html.ui-v2 .intel-open {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
html.ui-v2 .intel-open:focus-visible { outline: none; }
html.ui-v2 .intel-table tr:has(.intel-open:focus-visible) > * { background: var(--pf-panel-2); }
html.ui-v2 .intel-game-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-v2 .intel-game-name { font-weight: 600; font-size: 13px; color: var(--pf-text); overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .intel-game-by { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--pf-dimmer); overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .intel-flag { font-style: normal; font-size: 10.5px; color: var(--pf-warn); flex-shrink: 0; }
html.ui-v2 .intel-verified { width: 13px; height: 13px; flex: 0 0 13px; }

/* An icon plate that holds the name's first letter under the image, so a
   missing icon is a letter rather than a hole. */
html.ui-v2 .intel-row-icon, html.ui-v2 .intel-item-icon, html.ui-v2 .intel-sim-icon {
  position: relative; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden;
  background: var(--pf-panel-3); color: var(--pf-dim); font-weight: 700;
}
html.ui-v2 .intel-row-icon { width: 36px; height: 36px; border-radius: 9px; font-size: 13px; }
html.ui-v2 .intel-row-icon img, html.ui-v2 .intel-item-icon img, html.ui-v2 .intel-sim-icon img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}

html.ui-v2 .intel-trend .intel-spark, html.ui-v2 .intel-trend .intel-spark-none { width: 60px; height: 24px; }
html.ui-v2 .intel-spark { display: block; width: 92px; height: 26px; overflow: visible; }
html.ui-v2 .intel-spark .intel-spark-line { fill: none; stroke: var(--pf-dim); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.ui-v2 .intel-spark .intel-spark-area { fill: rgba(255, 255, 255, .05); }
html.ui-v2 .intel-spark circle { fill: var(--pf-dim); }
html.ui-v2 .intel-spark[data-tone="up"] .intel-spark-line { stroke: var(--pf-good); }
html.ui-v2 .intel-spark[data-tone="up"] .intel-spark-area { fill: rgba(86, 215, 154, .1); }
html.ui-v2 .intel-spark[data-tone="up"] circle { fill: var(--pf-good); }
html.ui-v2 .intel-spark[data-tone="down"] .intel-spark-line { stroke: #e4a283; }
html.ui-v2 .intel-spark[data-tone="down"] .intel-spark-area { fill: rgba(228, 162, 131, .1); }
html.ui-v2 .intel-spark[data-tone="down"] circle { fill: #e4a283; }
/* No readings: a quiet dotted baseline, and one point where there is one. */
html.ui-v2 .intel-spark-none { position: relative; display: block; width: 92px; height: 26px; }
html.ui-v2 .intel-spark-none::before {
  content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 0;
  border-top: 1.5px dotted rgba(255, 255, 255, .16);
}
html.ui-v2 .intel-spark-none i { position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--pf-dim); }

/* A share of the board, and approval: a short solid bar before the figure. */
html.ui-v2 .intel-bar, html.ui-v2 .intel-approval {
  display: inline-block; width: 36px; height: 6px; margin-right: 8px; vertical-align: 1px; border-radius: 3px;
  background: linear-gradient(90deg, var(--v2-accent) 0 calc(var(--v) * 100%), rgba(255, 255, 255, .08) calc(var(--v) * 100%) 100%);
}
html.ui-v2 .intel-approval[data-band="high"] { background: linear-gradient(90deg, var(--pf-good) 0 calc(var(--v) * 100%), rgba(255, 255, 255, .08) calc(var(--v) * 100%) 100%); }
html.ui-v2 .intel-approval[data-band="low"] { background: linear-gradient(90deg, #e4a283 0 calc(var(--v) * 100%), rgba(255, 255, 255, .08) calc(var(--v) * 100%) 100%); }
html.ui-v2 .intel-table td.intel-genre { color: var(--pf-dim); font-size: 12px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }

/* Loading: rows the board's own height, still, no shimmer. */
html.ui-v2 .intel-board-loading { gap: 6px; }
html.ui-v2 .intel-skel-row { height: 48px; border-radius: 10px; background: var(--pf-panel-2); opacity: .55; }
html.ui-v2 .intel-skel-block { min-height: 96px; border-radius: 18px; background: var(--pf-panel); }
html.ui-v2 .intel-skel-hero { min-height: 280px; }

/* Columns by tier, measured against the board's own width rather than the
   window's, so collapsing the rail brings columns back. Fewer columns on a
   narrow board rather than a sideways page. */
html.ui-v2 .intel-board { container-type: inline-size; container-name: board; }
@container board (max-width: 1059px) { html.ui-v2 .intel-table [data-tier="5"] { display: none; } }
@container board (max-width: 899px) { html.ui-v2 .intel-table [data-tier="4"] { display: none; } }
@container board (max-width: 699px) { html.ui-v2 .intel-table [data-tier="3"] { display: none; } }
@container board (max-width: 519px) { html.ui-v2 .intel-table [data-tier="2"] { display: none; } }
/* A share and approval bar sized to the narrower figure columns. */
html.ui-v2 .intel-table .intel-bar, html.ui-v2 .intel-table .intel-approval { width: 26px; margin-right: 6px; }
@media (max-width: 699px) {
  html.ui-v2 .intel-board { padding: 12px; border-radius: 14px; gap: 12px; }
  html.ui-v2 .intel-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.ui-v2 .intel-summary .intel-kpi:nth-child(3) { border-left: 0; }
  html.ui-v2 .intel-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html.ui-v2 .intel-find { grid-column: 1 / -1; }
  html.ui-v2 .intel-table th, html.ui-v2 .intel-table td { padding: 0 6px; height: 50px; }
  html.ui-v2 .intel-game { min-width: 0; max-width: none; }
  html.ui-v2 .intel-row-icon { width: 32px; height: 32px; }
  html.ui-v2 .intel-rank { width: 30px; }
}

/* -------------------------------------------------------------- profile */

html.ui-v2 .intel-profile { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html.ui-v2 .intel-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--pf-dimmer); font-size: 12.5px; }
html.ui-v2 .intel-crumbs > span[aria-hidden] { display: inline-flex; width: 12px; height: 12px; opacity: .6; }
html.ui-v2 .intel-crumbs > span[aria-hidden] svg { width: 12px; height: 12px; }
html.ui-v2 .intel-crumb {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border: 0; border-radius: 10px;
  background: var(--pf-panel); color: var(--pf-dim); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
html.ui-v2 .intel-crumb svg { width: 14px; height: 14px; }
html.ui-v2 .intel-crumb:hover, html.ui-v2 .intel-crumb:focus-visible { background: var(--pf-panel-2); color: var(--pf-text); outline: none; }
html.ui-v2 .intel-crumb-here { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pf-dim); }

/* The hero is two columns of one height. The copy fills its column from top
   to bottom: who made it at the top, the store's opening, the four facts as a
   spec sheet, and the actions level with the foot of the thumbnail strip. The
   gallery's main picture grows to meet the copy when the copy is taller. */
html.ui-v2 .intel-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(360px, 47%, 640px)); gap: 28px; align-items: stretch;
  padding: 24px; border-radius: 20px; background: var(--pf-panel);
}
html.ui-v2 .intel-hero-copy { container-type: inline-size; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-width: 0; }
html.ui-v2 .intel-hero-top, html.ui-v2 .intel-hero-foot { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
html.ui-v2 .intel-hero-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
html.ui-v2 .intel-hero-icon { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 22px; object-fit: cover; background: var(--pf-panel-3); -webkit-user-drag: none; user-select: none; }
html.ui-v2 .intel-hero-icon-none { display: grid; place-items: center; font-size: 36px; font-weight: 700; color: var(--pf-dim); }
html.ui-v2 .intel-hero-name { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .intel-hero h2 { margin: 0; font-size: clamp(24px, 2.1vw, 32px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: pretty; }
html.ui-v2 .intel-hero-by { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; color: var(--pf-dim); font-size: 13.5px; }
html.ui-v2 .intel-hero-by b { color: var(--pf-text); font-weight: 600; }
html.ui-v2 .intel-hero-blurb {
  margin: 0; max-width: 68ch; color: var(--pf-dim); font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
/* The facts as a spec sheet: a hairline over each, no boxes. Four across
   when the column is wide enough for "Battlegrounds & Fighting", else two. */
html.ui-v2 .intel-hero-facts { --cols: 2 !important; gap: 0 20px; margin: 0; width: 100%; }
html.ui-v2 .intel-hero-facts > div { padding: 12px 0; border-top: 1px solid var(--pf-line); }
html.ui-v2 .intel-hero-facts dd { font-size: 15px; }
html.ui-v2 .intel-facts.intel-hero-facts dd { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
@container (min-width: 520px) {
  html.ui-v2 .intel-hero-facts { --cols: 3 !important; }
}
/* A wide column carries a larger identity, so the top block holds its half. */
@container (min-width: 820px) {
  html.ui-v2 .intel-hero-icon { width: 120px; height: 120px; flex-basis: 120px; border-radius: 26px; }
  html.ui-v2 .intel-hero h2 { font-size: 36px; }
  html.ui-v2 .intel-hero-by { font-size: 14.5px; }
  html.ui-v2 .intel-hero-blurb { font-size: 15px; line-height: 1.65; }
  html.ui-v2 .intel-hero-facts dd { font-size: 17px; }
}
html.ui-v2 .intel-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html.ui-v2 .intel-hero-actions .pf-btn.ghost { background: var(--pf-panel-2); color: var(--pf-text); }
html.ui-v2 .intel-hero-actions .pf-btn.ghost:hover, html.ui-v2 .intel-hero-actions .pf-btn.ghost:focus-visible { background: var(--pf-panel-3); color: var(--pf-text); outline: none; }
html.ui-v2 .intel-hero-actions .pf-btn.ghost svg { color: var(--pf-dim); }
html.ui-v2 .intel-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; text-decoration: none; }
html.ui-v2 .intel-cta svg { width: 16px; height: 16px; flex: 0 0 16px; }
html.ui-v2 .intel-standing { color: var(--pf-dim); font-size: 12.5px; white-space: nowrap; }
html.ui-v2 .intel-standing b { color: var(--pf-text); font-size: 15px; font-weight: 700; margin-right: 2px; }

html.ui-v2 .intel-gallery { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html.ui-v2 .intel-gallery-main { width: 100%; aspect-ratio: 16 / 9; flex: 1 1 auto; min-height: 0; object-fit: cover; border-radius: 14px; background: var(--pf-panel-3); display: block; -webkit-user-drag: none; user-select: none; }
html.ui-v2 .intel-gallery-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
html.ui-v2 .intel-gallery-strip::-webkit-scrollbar { display: none; }
html.ui-v2 .intel-thumb { flex: 0 0 64px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 7px; overflow: hidden; background: var(--pf-panel-3); cursor: pointer; opacity: .55; transition: opacity 120ms ease, border-color 120ms ease; }
html.ui-v2 .intel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.ui-v2 .intel-thumb:hover { opacity: .85; }
html.ui-v2 .intel-thumb[aria-selected="true"] { opacity: 1; border-color: var(--v2-accent); }
html.ui-v2 .intel-thumb:focus-visible { outline: none; border-color: var(--v2-accent); opacity: 1; }

/* The headline figures: one band, no box per figure. */
html.ui-v2 .intel-kpis {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0;
  padding: 18px 4px; border-radius: 18px; background: var(--pf-panel);
}
html.ui-v2 .intel-kpi { min-width: 0; padding: 0 18px; position: relative; }
html.ui-v2 .intel-kpi + .intel-kpi { border-left: 1px solid var(--pf-line); }
html.ui-v2 .intel-kpi dt { color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; }
html.ui-v2 .intel-kpi dd { margin: 6px 0 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html.ui-v2 .intel-kpi dd b { font-size: 26px; font-weight: 680; letter-spacing: -.8px; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A word standing in for a figure reads at a fact's size and may wrap. */
html.ui-v2 .intel-kpi dd b.is-word { font-size: 17px; font-weight: 620; letter-spacing: -.2px; line-height: 1.3; white-space: normal; overflow: visible; margin-top: 4px; }
html.ui-v2 .intel-kpi dd span { color: var(--pf-dimmer); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; text-wrap: pretty; }
html.ui-v2 .intel-kpi-spark { margin-top: 8px; }
html.ui-v2 .intel-kpi-spark .intel-spark, html.ui-v2 .intel-kpi-spark .intel-spark-none { width: 100%; max-width: 140px; height: 30px; }
html.ui-v2 .intel-kpi-bar {
  display: block; width: 100%; max-width: 140px; height: 6px; margin-top: 10px; border-radius: 3px;
  background: linear-gradient(90deg, var(--pf-good) 0 calc(var(--v) * 100%), rgba(255, 255, 255, .08) calc(var(--v) * 100%) 100%);
}

/* Panels: two columns, the wide ones spanning both. */
html.ui-v2 .intel-card { min-width: 0; padding: 18px 20px 20px; border-radius: 18px; background: var(--pf-panel); display: flex; flex-direction: column; gap: 14px; }
html.ui-v2 .intel-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
html.ui-v2 .intel-card-icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; color: var(--v2-accent); }
html.ui-v2 .intel-card-icon svg { width: 20px; height: 20px; }
html.ui-v2 .intel-card-head h3 { margin: 0; font-size: 15px; font-weight: 620; letter-spacing: -.25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .intel-card-aside { margin-left: auto; color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.ui-v2 .intel-foot { margin: 0; color: var(--pf-dimmer); font-size: 11.5px; line-height: 1.6; }

/* A group of figures is one full row: the column count is the item count, set
   by the page. On a phone a four becomes a full two by two and a six a full
   three by two; a two or three stays on its one row with smaller type. Never
   auto-fit, which wraps a three into two and an orphan. */
html.ui-v2 .intel-facts { display: grid; grid-template-columns: repeat(var(--cols, var(--count, 2)), minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
html.ui-v2 .intel-facts > div { min-width: 0; }
html.ui-v2 .intel-facts dt { color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .intel-facts dd { margin: 3px 0 0; font-size: 17px; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .intel-facts > div[data-direction="up"] dd { color: var(--pf-good); }
html.ui-v2 .intel-facts > div[data-direction="down"] dd { color: #e4a283; }

html.ui-v2 .intel-meter { height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
html.ui-v2 .intel-meter i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 3px; background: var(--v2-accent); }
html.ui-v2 .intel-meter-label { margin: -6px 0 0; color: var(--pf-dim); font-size: 12.5px; }
html.ui-v2 .intel-meter-label b { color: var(--pf-text); font-weight: 650; }

/* Item lists: passes, badges, the creator's games. */
html.ui-v2 .intel-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
html.ui-v2 .intel-items > li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; }
html.ui-v2 .intel-items > li[data-off] { opacity: .5; }
html.ui-v2 .intel-items > li:has(.intel-item-open) { padding: 0; }
html.ui-v2 .intel-item-open {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 7px 8px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 120ms ease;
}
html.ui-v2 .intel-item-open:hover, html.ui-v2 .intel-item-open:focus-visible { background: var(--pf-panel-2); outline: none; }
html.ui-v2 .intel-item-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 14px; }
/* Badge and pass art is already a shape of its own, so it stands on the panel
   without a plate; the plate is only for the letter when there is no image. */
html.ui-v2 .intel-item-art:has(img) { background: transparent; overflow: visible; border-radius: 0; }
html.ui-v2 .intel-item-art img { object-fit: contain; }
html.ui-v2 .intel-item-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
html.ui-v2 .intel-item-copy b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .intel-item-copy span { display: flex; align-items: center; gap: 8px; color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .intel-item-value { flex: 0 0 auto; color: var(--pf-text); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui-v2 .intel-inline-bar {
  display: inline-block; flex: 0 0 40px; width: 40px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--v2-accent) 0 calc(var(--v) * 100%), rgba(255, 255, 255, .08) calc(var(--v) * 100%) 100%);
}

html.ui-v2 .intel-creator { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
html.ui-v2 .intel-creator b { font-size: 16px; font-weight: 650; }
html.ui-v2 .intel-creator span { flex-basis: 100%; color: var(--pf-dimmer); font-size: 12px; }

/* Similar games: a row of covers. */
html.ui-v2 .intel-similar { display: grid; grid-template-columns: repeat(var(--cols, var(--count, 6)), minmax(0, 1fr)); gap: 10px; }
html.ui-v2 .intel-sim {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border: 0; border-radius: 14px;
  background: var(--pf-panel-2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 120ms ease;
}
html.ui-v2 .intel-sim:hover, html.ui-v2 .intel-sim:focus-visible { background: var(--pf-panel-3); outline: none; }
html.ui-v2 .intel-sim-icon { width: 100%; aspect-ratio: 1; border-radius: 10px; font-size: 28px; }
html.ui-v2 .intel-sim b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .intel-sim span { color: var(--pf-dimmer); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Signals: each finding as a row, its evidence grade in words. */
/* Findings as clean rows: a hairline between them, no fill per row. The kind
   is coloured text in the left column; the evidence grade is quiet text under
   the finding, never a chip. */
html.ui-v2 .intel-signals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
html.ui-v2 .intel-signals > li {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: start; gap: 16px;
  min-width: 0; padding: 18px 0;
}
html.ui-v2 .intel-signals > li:first-child { padding-top: 4px; }
html.ui-v2 .intel-signals > li:last-child { padding-bottom: 0; }
html.ui-v2 .intel-signals > li + li { border-top: 1px solid var(--pf-line); }
html.ui-v2 .intel-signal-kind { font-size: 12px; font-weight: 650; color: var(--pf-dim); padding-top: 1px; white-space: nowrap; }
html.ui-v2 .intel-signals > li[data-kind="suggestion"] .intel-signal-kind { color: var(--v2-accent); }
html.ui-v2 .intel-signals p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pf-text); }
html.ui-v2 .intel-signal-grade { margin-top: -2px; color: var(--pf-dimmer); font-size: 11.5px; }
html.ui-v2 .intel-signal-grade[data-grade="documented"], html.ui-v2 .intel-signal-grade[data-grade="verified"] { color: #9fc987; }

html.ui-v2 .intel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
html.ui-v2 .intel-tags span { padding: 3px 9px; border-radius: 6px; background: rgba(141, 162, 255, .12); color: #ccd5ff; font-size: 11.5px; }
html.ui-v2 .intel-description { color: var(--pf-dim); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
html.ui-v2 .intel-description.is-long { max-height: 9.5em; overflow: hidden; }
html.ui-v2 .intel-more { align-self: flex-start; height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--pf-panel-2); color: var(--pf-text); font: inherit; font-size: 12px; cursor: pointer; }
html.ui-v2 .intel-more:hover, html.ui-v2 .intel-more:focus-visible { background: var(--pf-panel-3); outline: none; }

html.ui-v2 .intel-locked { margin: 0; color: var(--pf-dim); font-size: 12.5px; line-height: 1.7; }

html.ui-v2 .intel-history-empty { display: flex; align-items: center; gap: 18px; min-width: 0; }
html.ui-v2 .intel-history-empty .intel-spark, html.ui-v2 .intel-history-empty .intel-spark-none { flex: 0 0 240px; width: 240px; height: 48px; }
html.ui-v2 .intel-history-empty p { margin: 0; color: var(--pf-dim); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 1180px) {
  html.ui-v2 .intel-similar[data-n="6"] { --cols: 3; }
  html.ui-v2 .intel-hero { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .intel-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  html.ui-v2 .intel-kpi:nth-child(4) { border-left: 0; }
}
@media (max-width: 860px) {
  html.ui-v2 .intel-grid { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .intel-signals > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 640px) {
  html.ui-v2 .intel-hero { padding: 14px; gap: 16px; border-radius: 16px; }
  html.ui-v2 .intel-hero-copy { gap: 14px; }
  html.ui-v2 .intel-hero-id { gap: 14px; }
  html.ui-v2 .intel-hero-icon { width: 64px; height: 64px; flex-basis: 64px; border-radius: 15px; }
  html.ui-v2 .intel-hero h2 { font-size: 20px; letter-spacing: -.01em; }
  html.ui-v2 .intel-hero-by { font-size: 12.5px; }
  html.ui-v2 .intel-hero-blurb { font-size: 12.5px; }
  html.ui-v2 .intel-hero-facts dd { font-size: 13.5px; }
  html.ui-v2 .intel-hero-facts > div { padding: 10px 0; }
  /* Open on Roblox across the top, the other two sharing the row under it. */
  html.ui-v2 .intel-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.ui-v2 .intel-hero-actions > .primary { grid-column: 1 / -1; }
  html.ui-v2 .intel-hero-actions[data-n="2"] > .primary { grid-column: auto; }
  html.ui-v2 .intel-hero-actions[data-n="1"] > * { grid-column: 1 / -1; }
  html.ui-v2 .intel-hero-actions .intel-cta { justify-content: center; }
  html.ui-v2 .intel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 0; border-radius: 16px; }
  html.ui-v2 .intel-kpi { padding: 0 14px; }
  html.ui-v2 .intel-kpi:nth-child(odd) { border-left: 0; }
  html.ui-v2 .intel-kpi:nth-child(4) { border-left: 1px solid var(--pf-line); }
  html.ui-v2 .intel-kpi dd b { font-size: 20px; }
  html.ui-v2 .intel-card { padding: 14px; border-radius: 16px; }
  html.ui-v2 .intel-facts[data-n="4"] { --cols: 2; }
  html.ui-v2 .intel-facts[data-n="6"] { --cols: 3; }
  html.ui-v2 .intel-facts[data-n="3"] { gap: 12px 10px; }
  html.ui-v2 .intel-facts[data-n="3"] dd { font-size: 15px; }
  html.ui-v2 .intel-facts[data-n="3"] dt { font-size: 11px; }
  /* Six covers as two across and three down: names stay readable. */
  html.ui-v2 .intel-similar[data-n="6"], html.ui-v2 .intel-similar[data-n="4"] { --cols: 2; }
  html.ui-v2 .intel-similar[data-n="5"] { --cols: 5; }
  html.ui-v2 .intel-similar[data-n="3"] { --cols: 3; }
  html.ui-v2 .intel-similar[data-n="5"] .intel-sim b, html.ui-v2 .intel-similar[data-n="5"] .intel-sim span { white-space: normal; overflow-wrap: anywhere; }
  html.ui-v2 .intel-history-empty { flex-direction: column; align-items: flex-start; gap: 10px; }
  html.ui-v2 .intel-history-empty .intel-spark, html.ui-v2 .intel-history-empty .intel-spark-none { flex-basis: auto; width: 100%; }
}

/* ------------------------------------------------------------ layout */

/* A report is rows, every one full: the players chart beside one panel, then
   a row of equal panels, then the full-width rows. The column count of the
   equal row is how many panels it holds, so it never wraps into an orphan,
   and every panel in a row is the row's height. */
html.ui-v2 .pf-growth { min-width: 0; }
html.ui-v2 .pf-growth-head { margin-bottom: 18px; }
html.ui-v2 .intel-row-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
/* Rows size to their content: panels are packed so like sits with like
   (game-intel.js packRows), and a row is as tall as its tallest panel, with
   no floor that would leave a short panel hollow. */
html.ui-v2 .intel-row-split > * { min-width: 0; }
html.ui-v2 .intel-row-split > .pf-panel { height: 440px; min-height: 0; margin: 0; grid-column: auto; }
html.ui-v2 .intel-row-even { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; align-items: stretch; }
html.ui-v2 .intel-row-even > .intel-card, html.ui-v2 .intel-row-split > .intel-card { height: 100%; }
html.ui-v2 .intel-row-even > .pf-panel { height: auto; min-height: 0; max-height: 460px; margin: 0; grid-column: auto; min-width: 0; }
/* The dashboard's own panels, moved in beside these, wear the same frame:
   padding, heading size and a plain empty line, so every title in a row
   sits on one line. */
html.ui-v2 .intel-row-even > .pf-panel { padding: 18px 20px 20px; gap: 14px; }
html.ui-v2 .intel-row-even > .pf-panel .pf-panel-head { height: 20px; align-items: center; }
html.ui-v2 .intel-row-even > .pf-panel .pf-panel-t { font-size: 15px; font-weight: 620; letter-spacing: -.25px; line-height: 20px; }
html.ui-v2 .intel-row-even > .pf-panel .pf-empty { padding: 0; margin: 0; background: none; text-align: left; font-size: 12.5px; line-height: 1.65; color: var(--pf-dimmer); }
/* A one-line panel (nothing to list) keeps its head and its line, no more. */
html.ui-v2 .intel-row-even[data-size="sm"] > .pf-panel .pf-scroll { flex: 0 0 auto; }
html.ui-v2 .intel-card-wide { grid-column: 1 / -1; }
@media (max-width: 1180px) {
  html.ui-v2 .intel-row-even[data-n="3"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  html.ui-v2 .intel-row-even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  html.ui-v2 .intel-row-split { grid-template-columns: minmax(0, 1fr); }
  html.ui-v2 .intel-row-split > .pf-panel { height: 420px; }
}

/* Where it stands: the game among the board's games either side of it. */
html.ui-v2 .intel-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; justify-content: space-between; }
html.ui-v2 .intel-ladder > li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px 72px; align-items: center; gap: 14px;
  min-height: 48px; padding: 0 12px; border-radius: 12px;
}
html.ui-v2 .intel-ladder > li[data-self] { background: rgba(141, 162, 255, .1); }
html.ui-v2 .intel-ladder-rank { color: var(--pf-dimmer); font-size: 12px; font-variant-numeric: tabular-nums; }
html.ui-v2 .intel-ladder > li[data-self] .intel-ladder-rank { color: #ccd5ff; font-weight: 700; }
html.ui-v2 .intel-ladder-game {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
html.ui-v2 span.intel-ladder-game { cursor: default; }
html.ui-v2 .intel-ladder-game b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
html.ui-v2 button.intel-ladder-game:hover b, html.ui-v2 button.intel-ladder-game:focus-visible b { color: #ccd5ff; }
html.ui-v2 button.intel-ladder-game:focus-visible { outline: none; }
html.ui-v2 .intel-ladder-game .intel-row-icon { width: 30px; height: 30px; border-radius: 8px; }
html.ui-v2 .intel-ladder-gap { text-align: right; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--pf-dimmer); white-space: nowrap; }
html.ui-v2 .intel-ladder-gap[data-direction="ahead"] { color: #e4a283; }
html.ui-v2 .intel-ladder-gap[data-direction="behind"] { color: var(--pf-good); }
html.ui-v2 .intel-ladder-gap[data-self] { color: #ccd5ff; }

/* Servers, one tile each, filled from the bottom to its occupancy. */
html.ui-v2 .intel-server-grid { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; margin-top: auto; }
html.ui-v2 .intel-server-grid i {
  display: block; height: 28px; border-radius: 6px;
  background: linear-gradient(0deg, var(--v2-accent) 0 calc(var(--v) * 100%), rgba(255, 255, 255, .06) calc(var(--v) * 100%) 100%);
}
html.ui-v2 .intel-ladder-n { text-align: right; font-size: 13px; font-weight: 640; font-variant-numeric: tabular-nums; }

/* Findings: the claim in one line, its reasoning folded under Why. */
html.ui-v2 .intel-signal-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
html.ui-v2 .intel-signal-copy > p { font-weight: 560; }
html.ui-v2 .intel-signal-copy details summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  color: var(--pf-dimmer); font-size: 11.5px; font-weight: 600;
}
html.ui-v2 .intel-signal-copy details summary::-webkit-details-marker { display: none; }
html.ui-v2 .intel-signal-copy details summary::after {
  content: ''; width: 5px; height: 5px; margin-top: -2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
}
html.ui-v2 .intel-signal-copy details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
html.ui-v2 .intel-signal-copy details summary:hover { color: var(--pf-text); }
html.ui-v2 .intel-signal-copy details p { margin-top: 6px; color: var(--pf-dim); font-weight: 400; }


@media (max-width: 640px) {
  html.ui-v2 .intel-ladder > li { grid-template-columns: 24px minmax(0, 1fr) 64px 52px; gap: 8px; padding: 0 8px; }
  html.ui-v2 .intel-ladder-gap, html.ui-v2 .intel-ladder-n { font-size: 11.5px; }
}

/* Chart picker beside the genre picker. */

/* A two-way switch in a panel's heading: the genre or every charted game. */
html.ui-v2 .intel-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--pf-panel-2); }
html.ui-v2 .intel-seg button {
  height: 28px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--pf-dim);
  font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 120ms ease, color 120ms ease;
}
html.ui-v2 .intel-seg button[aria-selected="true"] { background: var(--pf-panel-3); color: var(--pf-text); }
html.ui-v2 .intel-seg button:hover, html.ui-v2 .intel-seg button:focus-visible { color: var(--pf-text); outline: none; }
html.ui-v2 .intel-ladder-view { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
html.ui-v2 .intel-ladder-view[hidden] { display: none; }
html.ui-v2 .intel-ladder-caption { margin: 0; color: var(--pf-dimmer); font-size: 12px; }

/* Positions on Roblox's charts: the chart, then its number, aligned right. */
html.ui-v2 .intel-charts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
html.ui-v2 .intel-charts li { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; align-items: baseline; gap: 10px; padding: 9px 0; }
html.ui-v2 .intel-charts li + li { border-top: 1px solid var(--pf-line); }
html.ui-v2 .intel-charts span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
html.ui-v2 .intel-charts b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
html.ui-v2 .intel-charts em { font-style: normal; color: var(--pf-dimmer); font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; }
html.ui-v2 .intel-hero-by span { color: var(--pf-dimmer); margin-left: 4px; }

/* A second band of figures inside a panel sits quieter than the first. */
html.ui-v2 .intel-facts-quiet dd { font-size: 14px; color: var(--pf-dim); }

/* Scheduled events: the date, then what it is. */
html.ui-v2 .intel-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
html.ui-v2 .intel-events li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; }
html.ui-v2 .intel-events li + li { border-top: 1px solid var(--pf-line); }
html.ui-v2 .intel-event-date { color: #ccd5ff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
html.ui-v2 .intel-event-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-v2 .intel-event-copy b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-v2 .intel-event-copy span { color: var(--pf-dimmer); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The board's four figures stay one row of four, and a full two by two on a
   phone; the six-figure band's three-column step does not apply to them. */
@media (min-width: 700px) { html.ui-v2 .intel-kpis.intel-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } html.ui-v2 .intel-kpis.intel-summary .intel-kpi:nth-child(4) { border-left: 1px solid var(--pf-line); } }

/* A finding's plan: reason, action, how to judge it and the evidence window,
   a two by two under the finding, one column on a phone. */
html.ui-v2 .intel-signal-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 4px 0 2px; }
html.ui-v2 .intel-signal-plan > div { min-width: 0; }
html.ui-v2 .intel-signal-plan dt { color: var(--pf-dimmer); font-size: 11px; font-weight: 600; }
html.ui-v2 .intel-signal-plan dd { margin: 2px 0 0; color: var(--pf-dim); font-size: 12.5px; line-height: 1.55; }
@media (max-width: 640px) { html.ui-v2 .intel-signal-plan { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* Moments: eligible or not, and the reason in a line under the figures. */
html.ui-v2 .intel-moments-why { margin: 12px 0 0; color: var(--pf-dim); font-size: 12.5px; line-height: 1.6; }
html.ui-v2 [data-moments-value][data-eligible="true"] { color: var(--pf-good); }

/* Risers or fallers, in the genre picker's place and at its height. */
html.ui-v2 .intel-toolbar .intel-direction { display: grid; grid-template-columns: 1fr 1fr; height: 40px; }
html.ui-v2 .intel-toolbar .intel-direction button { height: 34px; }

/* A game's accounts: the marks alone, unboxed, each a link out. */
html.ui-v2 .intel-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; }
html.ui-v2 .intel-link { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; opacity: .88; transition: opacity 120ms ease; }
html.ui-v2 .intel-link .pf-brandmark { width: 22px; height: 22px; border-radius: 0; }
html.ui-v2 .intel-link:hover, html.ui-v2 .intel-link:focus-visible { opacity: 1; outline: none; }
html.ui-v2 .intel-link:focus-visible { background: var(--pf-panel-2); }

/* Updates: the date, then what shipped that day. */
html.ui-v2 .intel-updates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
html.ui-v2 .intel-updates li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; }
html.ui-v2 .intel-updates li + li { border-top: 1px solid var(--pf-line); }
html.ui-v2 .intel-upd-date { color: #ccd5ff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui-v2 .intel-upd-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-v2 .intel-upd-copy b { font-size: 13px; font-weight: 600; }
html.ui-v2 .intel-upd-copy span { color: var(--pf-dimmer); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

/* Each panel answers to its own width, so a switch in its heading moves
   under the title wherever the panel is narrow, not only on a phone. */
html.ui-v2 .intel-card { container-type: inline-size; }
@container (max-width: 640px) {
  /* A heading with a switch beside it: the switch goes under the title, one
     line that scrolls sideways, so neither is cut at the panel's edge. */
  html.ui-v2 .intel-card-head:has(.intel-seg) { flex-wrap: wrap; row-gap: 10px; }
  html.ui-v2 .intel-card-head:has(.intel-seg) h3 { flex: 1 1 auto; }
  html.ui-v2 .intel-card-aside:has(.intel-seg) {
    flex: 1 0 100%; margin-left: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; text-overflow: clip;
  }
  html.ui-v2 .intel-card-aside:has(.intel-seg)::-webkit-scrollbar { display: none; }
  html.ui-v2 .intel-card-aside .intel-seg { display: inline-flex; min-width: max-content; }
}
@media (max-width: 600px) { html.ui-v2 .intel-links { gap: 6px 16px; } }

@media (max-width: 400px) {
  /* A panel's note goes under its title on a narrow phone, so the title is
     never cut to make room for it. */
  html.ui-v2 .intel-card-head:has(.intel-card-aside:not(.is-seg)) { flex-wrap: wrap; row-gap: 4px; }
  html.ui-v2 .intel-card-head:has(.intel-card-aside:not(.is-seg)) h3 { flex: 1 1 auto; }
  html.ui-v2 .intel-card-aside:not(.is-seg) { flex: 1 0 100%; margin-left: 30px; white-space: normal; overflow: visible; }
  /* List rows wrap their name and figures rather than cutting them. */
  html.ui-v2 .intel-item-copy b { white-space: normal; overflow-wrap: anywhere; }
  html.ui-v2 .intel-item-copy span { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
}
@media (max-width: 400px) {
  /* The ladder drops its gap column on a narrow phone and lets a name take
     two lines, so every game is named in full; the row's own highlight marks
     this game. */
  html.ui-v2 .intel-ladder > li { grid-template-columns: 22px minmax(0, 1fr) 58px; }
  html.ui-v2 .intel-ladder-gap { display: none; }
  html.ui-v2 .intel-ladder-game b { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; }
  html.ui-v2 .intel-ladder > li { min-height: 52px; }
}
/* A panel moved in from the dashboard shows its whole line: no fade at the
   foot of a list that has nothing below it. */
html.ui-v2 .intel-row-even > .pf-panel .pf-scroll { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 600px) {
  /* A recommended game's name takes two lines rather than being cut. */
  html.ui-v2 .intel-sim b { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; min-height: 2.6em; }
}

/* Phones: body text at 14 px, like the rest of the workspace. */
@media (max-width: 480px) { html.ui-v2 .intel-kpi dd { font-size: 14px; } }