/* The dashboard.
   One twelve column grid with deliberately uneven spans, so it reads as a
   composition rather than a row of equal boxes: live players takes five
   columns and two rows, reception and servers share the other seven above
   the findings, and the board and its studios sit eight and four beneath.
   Every cell has the same head, so every label sits on the same line, and
   every cell carries a visual rather than a bare number. No dividers between
   rows; spacing and a background step do that. */

html.ui-v2 .ph { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding-bottom: 12px; }

/* ------------------------------------------------------------------ head */

html.ui-v2 .ph-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: 16px; row-gap: 14px; min-width: 0;
}
html.ui-v2 .ph-icon { width: 56px; height: 56px; border-radius: 13px; background: var(--pf-panel-2); overflow: hidden; }
html.ui-v2 .ph-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.ui-v2 .ph-title { min-width: 0; }
html.ui-v2 .ph-title h1 {
  margin: 0; font-size: 28px; font-weight: 650; letter-spacing: -.035em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.ui-v2 .ph-meta { margin: 4px 0 0; font-size: 13px; color: var(--pf-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .ph-actions { display: flex; align-items: center; gap: 16px; }
html.ui-v2 .ph-actions .pf-btn { white-space: nowrap; }
html.ui-v2 .ph-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

html.ui-v2 .ph-quiet {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  color: var(--v2-accent); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: color var(--ph-hover) ease;
}
html.ui-v2 .ph-quiet:hover, html.ui-v2 .ph-quiet:focus-visible { color: #ccd5ff; }
html.ui-v2 .ph-quiet svg, html.ui-v2 .ph-next svg, html.ui-v2 .ph-go svg { width: 13px; height: 13px; transition: transform var(--ph-hover) var(--ph-ease); }

/* ------------------------------------------------------------------ grid */

html.ui-v2 .ph-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; min-width: 0;
}
html.ui-v2 .ph { --ph-hover: 150ms; --ph-ease: cubic-bezier(0.23, 1, 0.32, 1); }

html.ui-v2 .ph-cell {
  display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 20px;
  background: var(--pf-panel); border: 0; border-radius: 16px;
}
html.ui-v2 .ph-live { grid-column: span 5; grid-row: span 2; }
html.ui-v2 .ph-reception { grid-column: span 4; }
html.ui-v2 .ph-servers { grid-column: span 3; }
html.ui-v2 .ph-findings { grid-column: span 7; }
html.ui-v2 .ph-top { grid-column: span 8; }
html.ui-v2 .ph-studios { grid-column: span 4; }

/* The same head in every cell, so the labels line up across a row. */
html.ui-v2 .ph-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; margin-bottom: 14px; }
html.ui-v2 .ph-cell-head h2 { margin: 0; font-size: 13.5px; font-weight: 560; color: var(--pf-text); letter-spacing: -.01em; white-space: nowrap; }
html.ui-v2 .ph-mark { font-size: 11.5px; color: var(--pf-dimmer); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

html.ui-v2 .ph-figure { margin: 0; font-size: 44px; font-weight: 620; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
html.ui-v2 .ph-figure .ph-wait { font-size: 13px; font-weight: 400; letter-spacing: 0; }
html.ui-v2 .ph-figure[data-absent="true"] { font-size: 15px; font-weight: 450; letter-spacing: 0; color: var(--pf-dim); line-height: 1.5; }
html.ui-v2 .ph-sub { margin: 10px 0 0; font-size: 12.5px; color: var(--pf-dim); line-height: 1.55; }
html.ui-v2 .ph-wait { margin: 0; font-size: 12.5px; color: var(--pf-dimmer); line-height: 1.6; }
html.ui-v2 .ph-problem { color: var(--pf-bad); }

/* ------------------------------------------------------------------- bars */

html.ui-v2 .ph-bar { display: flex; gap: 3px; height: 8px; margin-top: 18px; }
html.ui-v2 .ph-bar:empty { background: var(--pf-panel-2); border-radius: 4px; }
html.ui-v2 .ph-bar > span { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
html.ui-v2 .ph-bar-up { background: var(--v2-accent); }
html.ui-v2 .ph-bar-down { background: rgba(228, 162, 131, .55); }
html.ui-v2 .ph-servers .ph-bar { background: var(--pf-panel-2); border-radius: 4px; gap: 0; }
html.ui-v2 .ph-bar-fill { background: var(--v2-accent); }

/* ----------------------------------------------------------- live players */

/* Every game in the sample as a tick on a log scale of live players, with
   this one drawn taller in the accent. The line is the chart: no axis, no
   gridlines, only the two ends named. */
html.ui-v2 .ph-strip { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; }
html.ui-v2 .ph-strip:empty { display: none; }
html.ui-v2 .ph-strip svg { grid-column: 1 / -1; width: 100%; height: 44px; display: block; }
html.ui-v2 .ph-strip line { stroke: rgba(255, 255, 255, .16); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
html.ui-v2 .ph-strip line.ph-strip-own { stroke: var(--v2-accent); stroke-width: 3; }
html.ui-v2 .ph-strip-end { font-size: 10.5px; color: var(--pf-dimmer); font-variant-numeric: tabular-nums; margin-top: 4px; }
html.ui-v2 .ph-strip-end-r { text-align: right; }

html.ui-v2 .ph-neighbours, html.ui-v2 .ph-list, html.ui-v2 .ph-bars, html.ui-v2 .ph-findings-list { list-style: none; margin: 0; padding: 0; }
html.ui-v2 .ph-neighbours { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 2px; }
html.ui-v2 .ph-neighbours li {
  display: grid; grid-template-columns: 38px 26px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px; font-size: 13px;
}
html.ui-v2 .ph-neighbours li[data-own] { background: #1c2133; color: #ccd5ff; }
html.ui-v2 .ph-neighbours img, html.ui-v2 .ph-neighbours .ph-noicon { width: 26px; height: 26px; border-radius: 7px; background: var(--pf-panel-2); object-fit: cover; }

html.ui-v2 .ph-rank { color: var(--pf-dimmer); font-size: 12px; font-variant-numeric: tabular-nums; }
html.ui-v2 .ph-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ui-v2 .ph-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.ui-v2 .ph-dim { color: var(--pf-dim); }

/* --------------------------------------------------------------- findings */

/* Findings as clean rows: a hairline between them, no fill and no chip. The
   kind is coloured text in the left column, the finding beside it. */
html.ui-v2 .ph-findings-list { display: flex; flex-direction: column; gap: 0; }
html.ui-v2 .ph-findings-list > li + li { border-top: 1px solid var(--pf-line); }
html.ui-v2 .ph-findings-list summary {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 12px; align-items: baseline; gap: 12px;
  padding: 11px 0; list-style: none; cursor: pointer; font-size: 13px;
}
html.ui-v2 .ph-findings-list summary::-webkit-details-marker { display: none; }
html.ui-v2 .ph-findings-list summary::after {
  content: ''; justify-self: end; align-self: start; width: 6px; height: 6px; margin-top: 5px;
  border-right: 1.6px solid var(--pf-dimmer); border-bottom: 1.6px solid var(--pf-dimmer); transform: rotate(45deg);
  transition: transform var(--ph-hover) var(--ph-ease);
}
html.ui-v2 .ph-findings-list details[open] summary::after { transform: rotate(-135deg); margin-top: 9px; }
html.ui-v2 .ph-findings-list summary:focus-visible { outline: none; }
html.ui-v2 .ph-findings-list summary:hover .ph-lead, html.ui-v2 .ph-findings-list summary:focus-visible .ph-lead { color: #ccd5ff; }
html.ui-v2 .ph-kind { font-size: 11.5px; font-weight: 650; color: var(--pf-dim); white-space: nowrap; }
html.ui-v2 .ph-kind[data-kind="suggestion"] { color: var(--v2-accent); }
html.ui-v2 .ph-lead { min-width: 0; line-height: 1.5; text-wrap: pretty; overflow-wrap: anywhere; transition: color var(--ph-hover) ease; }
html.ui-v2 .ph-findings-list details p { margin: 0; padding: 0 24px 12px 108px; font-size: 12.5px; line-height: 1.65; color: var(--pf-dim); }
html.ui-v2 .ph-findings-list details em { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; color: var(--pf-dimmer); }

/* ------------------------------------------------------------ most played */

html.ui-v2 .ph-list { display: flex; flex-direction: column; gap: 2px; }
html.ui-v2 .ph-list button {
  display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) 92px 62px 16px; align-items: center; gap: 12px;
  width: 100%; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--pf-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  transition: background-color var(--ph-hover) ease;
}
html.ui-v2 .ph-list button:hover, html.ui-v2 .ph-list button:focus-visible { background: var(--pf-panel-2); }
html.ui-v2 .ph-list img, html.ui-v2 .ph-list .ph-noicon { width: 34px; height: 34px; border-radius: 9px; background: var(--pf-panel-2); object-fit: cover; }
html.ui-v2 .ph-go { color: var(--pf-dimmer); display: flex; transition: color var(--ph-hover) ease; }
html.ui-v2 .ph-list button:hover .ph-go { color: var(--v2-accent); }

/* ---------------------------------------------------------------- studios */

html.ui-v2 .ph-bars { display: flex; flex-direction: column; gap: 14px; }
html.ui-v2 .ph-bars-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
html.ui-v2 .ph-bars-track { display: block; height: 6px; margin-top: 7px; border-radius: 3px; background: var(--pf-panel-2); }
html.ui-v2 .ph-bars-fill { display: block; height: 100%; border-radius: 3px; background: var(--v2-accent); min-width: 2px; }

/* ------------------------------------------------------------------- next */

html.ui-v2 .ph-next { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 4px 2px 0; }
html.ui-v2 .ph-next button {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  color: var(--pf-dim); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: color var(--ph-hover) ease;
}
html.ui-v2 .ph-next button:hover, html.ui-v2 .ph-next button:focus-visible { color: var(--pf-text); }

/* A chevron that moves a few pixels toward where it goes, only on a real
   pointer: a tap on a touch screen would leave it stuck mid nudge. */
@media (hover: hover) and (pointer: fine) {
  html.ui-v2 .ph-quiet:hover svg, html.ui-v2 .ph-next button:hover svg, html.ui-v2 .ph-list button:hover .ph-go svg { transform: translateX(3px); }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1280px) {
  /* The Roblox coin in the links row goes to the same place, so the title
     keeps the room. */
  html.ui-v2 .ph-actions .ph-quiet { display: none; }
  html.ui-v2 .ph-live { grid-column: span 12; grid-row: auto; }
  html.ui-v2 .ph-reception { grid-column: span 7; }
  html.ui-v2 .ph-servers { grid-column: span 5; }
  html.ui-v2 .ph-findings { grid-column: span 12; }
  html.ui-v2 .ph-top { grid-column: span 12; }
  html.ui-v2 .ph-studios { grid-column: span 12; }
  html.ui-v2 .ph-neighbours { margin-top: 0; }
}

@media (max-width: 760px) {
  html.ui-v2 .ph-head { grid-template-columns: auto minmax(0, 1fr); }
  /* A phone has the height to spare and not the width, so the name wraps,
     balanced, rather than losing its end to an ellipsis. */
  html.ui-v2 .ph-title h1 { white-space: normal; font-size: 23px; text-wrap: balance; }
  html.ui-v2 .ph-meta { white-space: normal; text-wrap: pretty; }
  html.ui-v2 .ph-actions { grid-column: 1 / -1; }
  html.ui-v2 .ph-reception, html.ui-v2 .ph-servers { grid-column: span 12; }
  html.ui-v2 .ph-figure { font-size: 38px; }
  html.ui-v2 .ph-list button { grid-template-columns: 22px 30px minmax(0, 1fr) 76px 14px; }
  html.ui-v2 .ph-list button > .ph-num.ph-dim { display: none; }
  html.ui-v2 .ph-list img, html.ui-v2 .ph-list .ph-noicon { width: 30px; height: 30px; }
  html.ui-v2 .ph-findings-list summary { grid-template-columns: minmax(0, 1fr) 12px; gap: 4px 12px; }
  html.ui-v2 .ph-kind { grid-column: 1; }
  html.ui-v2 .ph-lead { grid-column: 1; white-space: normal; text-wrap: pretty; }
  html.ui-v2 .ph-findings-list summary::after { grid-column: 2; grid-row: 1 / span 2; }
  html.ui-v2 .ph-findings-list details p { padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.ui-v2 .ph-quiet svg, html.ui-v2 .ph-next svg, html.ui-v2 .ph-go svg { transition: none; transform: none !important; }
}

/* Loading: two still bars the panel's own grey, no shimmer. */
html.ui-v2 .ph-skel { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
html.ui-v2 .ph-skel i { display: block; height: 12px; border-radius: 6px; background: var(--pf-panel-2); }
html.ui-v2 .ph-skel i:first-of-type { width: 62%; height: 22px; }
html.ui-v2 .ph-skel i:last-of-type { width: 38%; }
html.ui-v2 .ph-list .ph-skel, html.ui-v2 .ph-bars .ph-skel { list-style: none; }

/* ---------------------------------------------------------- content marks
   The Content page names a platform by its mark alone: no name beside it,
   no box round it. The name is the mark's aria-label and its hover title.
   Kept here, after dashboard.css, so these win without !important. */

html.ui-v2 .pf-mark { display: inline-flex; align-items: center; flex: 0 0 auto; width: 18px; height: 18px; }
html.ui-v2 .pf-mark .pf-brandmark, html.ui-v2 img.pf-mark-tile { width: 18px; height: 18px; border-radius: 0; display: block; }
html.ui-v2 img.pf-mark-tile { border-radius: 4px; }
/* The platform choices: the marks alone, one row of four at every width. */
html.ui-v2 .pf-seg-b.pf-seg-mark { padding: 6px 4px; }
html.ui-v2 .pf-seg-b.pf-seg-mark .pf-brandmark { width: 18px; height: 18px; border-radius: 0; opacity: .72; transition: opacity .13s ease; }
html.ui-v2 .pf-seg-b.pf-seg-mark:hover .pf-brandmark, html.ui-v2 .pf-seg-b.pf-seg-mark[aria-checked="true"] .pf-brandmark { opacity: 1; }
/* A tracked account: its mark and handle as plain text, and the cross. The
   chosen account is set in the accent colour rather than boxed. */
html.ui-v2 .pf-tracked-tags { gap: 4px 16px; }
html.ui-v2 .pf-tracked-acct { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
html.ui-v2 .pf-acct-pick {
  appearance: none; border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; height: 28px; padding: 0; cursor: pointer;
  color: var(--pf-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .13s ease;
}
html.ui-v2 .pf-acct-pick:hover, html.ui-v2 .pf-acct-pick:focus-visible { color: var(--pf-text); outline: none; }
html.ui-v2 .pf-tracked-acct.on .pf-acct-pick { color: #ccd5ff; }
html.ui-v2 .pf-acct-mark { display: inline-flex; flex: 0 0 16px; width: 16px; height: 16px; }
html.ui-v2 .pf-acct-mark .pf-brandmark { width: 16px; height: 16px; border-radius: 0; }
html.ui-v2 .pf-acct-x {
  appearance: none; border: 0; background: transparent; font: inherit; font-size: 16px; line-height: 1;
  width: 24px; height: 28px; padding: 0; cursor: pointer; color: var(--pf-dimmer); border-radius: 6px; flex: 0 0 auto;
}
html.ui-v2 .pf-acct-x:hover, html.ui-v2 .pf-acct-x:focus-visible { color: var(--pf-bad); outline: none; background: var(--pf-panel-2); }
/* The mark on a post's thumbnail: the platform's glyph, drawn not loaded. */
html.ui-v2 .pf-upload-art .pf-upload-glyph { display: grid; place-items: center; background: #0f0f0f; }
html.ui-v2 .pf-upload-art .pf-upload-glyph .pf-brandmark { width: 12px; height: 12px; border-radius: 0; }
/* The track dialog's platform tiles carry the drawn marks. */
html.ui-v2 .pf-tdlg-plat .pf-brandmark { width: 22px; height: 22px; border-radius: 0; }
/* The views chart's legend and its table heads: marks in place of swatches. */
html.ui-v2 .pf-legend-mark { display: inline-flex; flex: 0 0 14px; width: 14px; height: 14px; }
html.ui-v2 .pf-legend-mark .pf-brandmark { width: 14px; height: 14px; border-radius: 0; }
html.ui-v2 .pf-legend-i:has(.pf-legend-mark) { gap: 7px; }
html.ui-v2 .pf-th-mark .pf-legend-mark { vertical-align: -3px; }
html.ui-v2 .pf-content-chart .pf-tableview.open table { table-layout: fixed; }
html.ui-v2 .pf-content-chart .pf-tableview.open th:first-child, html.ui-v2 .pf-content-chart .pf-tableview.open td:first-child { width: 22%; }
html.ui-v2 .pf-content-chart .pf-tableview.open td { overflow: hidden; text-overflow: ellipsis; }
/* The tracked panel's head keeps its title, count and Add on one line. */
html.ui-v2 .pf-tracked .pf-panel-head { flex-wrap: nowrap; }
html.ui-v2 .pf-tracked .pf-panel-head .pf-panel-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) {
  html.ui-v2 .pf-content-chart .pf-tableview.open th, html.ui-v2 .pf-content-chart .pf-tableview.open td { padding: 6px 3px; font-size: 11.5px; }
}
/* A figure's short form shows only where the table itself is narrow, by the
   table's own width rather than the window's. */
html.ui-v2 .pf-fit-short { display: none; }
html.ui-v2 .pf-tableview.open { container-type: inline-size; }
@container (max-width: 520px) {
  html.ui-v2 .pf-fit-short { display: inline; }
  html.ui-v2 .pf-fit-full {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 760px) {
  /* On a phone the views chart and its day table stack at their own height,
     so every day of the week shows rather than the first row alone. */
  html.ui-v2 .pf-content-chart .pf-chartwrap, html.ui-v2 .pf-content-chart .pf-chart-stack { height: auto; max-height: none; }
  html.ui-v2 .pf-content-main > .pf-content-chart { overflow: visible; }
}

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