/* PuntersHub interactive performance widget.
   Everything is scoped under .phperf so the theme's own styles can't leak in
   and ours can't leak out. Colours are tokens so a restyle is one block. */

.phperf {
  --ph-card: #1f1726;
  --ph-card-2: #252129;
  --ph-page: #0a080d;
  --ph-line: rgba(255, 255, 255, 0.08);
  --ph-line-2: rgba(255, 255, 255, 0.16);
  --ph-ink: #ffffff;
  --ph-ink-2: #a9a0b2;
  --ph-muted: #7d7487;
  --ph-accent: #ffcd07;
  --ph-accent-ink: #1f1726;
  --ph-good: #2fbf4a;
  --ph-bad: #f06a6a;
  --ph-radius: 8px;

  color: var(--ph-ink-2);
  font-size: 17px;
  line-height: 1.45;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
.phperf *, .phperf *::before, .phperf *::after { box-sizing: border-box; }

/* While the website works out a new view, the current one stays on screen, faded a little.
   The fade only starts after 0.15s, so quick updates never flicker. */
.phperf .phperf-summary, .phperf .phperf-stats, .phperf .phperf-card { transition: opacity 0.15s; }
.phperf.is-loading .phperf-summary, .phperf.is-loading .phperf-stats, .phperf.is-loading .phperf-card { opacity: 0.55; }

/* Text in the graph section can't be selected (so not easily copied). The search box still can. */
.phperf { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.phperf input, .phperf textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* The site theme styles bare headings (Anton font, uppercase, huge sizes) and hides
   animated ones until they scroll into view. Our headings opt out of all of that. */
.phperf h1, .phperf h2, .phperf h3, .phperf h4, .phperf h5, .phperf h6 {
  font-family: inherit;
  line-height: inherit;
  text-transform: none;
  letter-spacing: normal;
  visibility: visible;
}

/* The plugin's wrapper. It also carries the theme's own container class, so the graph's
   side margins line up with the header and the rest of the site at every screen size. */
.phperf-section { margin-top: 60px; margin-bottom: 60px; }
.phperf-section .phperf { max-width: none; }
.phperf-intro { margin-bottom: 32px; text-align: center; }
.phperf-intro p { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.45; color: #a9a0b2; }
.phperf-intro h2 em { font-style: normal; color: #ffcd07; } /* same as the theme's own heading highlight */
.phperf-intro .phperf-keep { white-space: nowrap; }

.phperf button, .phperf input, .phperf select {
  font: inherit;
  color: var(--ph-ink);
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

.phperf-status {
  padding: 48px 16px;
  text-align: center;
  color: var(--ph-ink-2);
}

/* ---------- Filter row ---------- */

.phperf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.phperf-filters .phperf-spacer { flex: 1 1 auto; }

.phperf-ctl,
.phperf-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--ph-card);
  border: 1px solid var(--ph-line-2);
  border-radius: var(--ph-radius);
  padding: 8px 32px 8px 12px;
  min-height: 40px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  position: relative;
  background-image: linear-gradient(45deg, transparent 50%, var(--ph-ink-2) 50%),
                    linear-gradient(135deg, var(--ph-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.phperf-ctl:hover, .phperf-select:hover { border-color: var(--ph-ink-2); }
.phperf-ctl:focus-visible, .phperf-select:focus-visible,
.phperf-seg button:focus-visible, .phperf-btn:focus-visible,
.phperf th button:focus-visible {
  outline: 2px solid var(--ph-accent);
  outline-offset: 2px;
}
.phperf-ctl.is-set { border-color: var(--ph-accent); }
.phperf-select option { background: var(--ph-card); color: var(--ph-ink); }

.phperf-ms { position: relative; }
.phperf-pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--ph-card-2);
  border: 1px solid var(--ph-line-2);
  border-radius: var(--ph-radius);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.phperf-pop[hidden] { display: none; }
.phperf-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ph-ink);
  user-select: none;
}
.phperf-opt:hover { background: rgba(255, 255, 255, 0.06); }
.phperf-opt input { accent-color: var(--ph-accent); width: 16px; height: 16px; margin: 0; }
.phperf-opt.is-all { border-bottom: 1px solid var(--ph-line); border-radius: 6px 6px 0 0; margin-bottom: 4px; }

.phperf-seg {
  display: inline-flex;
  border: 1px solid var(--ph-line-2);
  border-radius: var(--ph-radius);
  overflow: hidden;
  min-height: 40px;
}
.phperf-seg button {
  background: var(--ph-card);
  border: 0;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--ph-ink-2);
  border-radius: 0;
}
.phperf-seg button + button { border-left: 1px solid var(--ph-line-2); }
.phperf-seg button[aria-pressed="true"] { background: var(--ph-accent); color: var(--ph-accent-ink); font-weight: 600; }

.phperf-perunit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ph-ink-2);
  font-size: 16px;
}
.phperf-perunit input {
  width: 84px;
  background: var(--ph-card);
  border: 1px solid var(--ph-line-2);
  border-radius: var(--ph-radius);
  padding: 8px 10px;
  min-height: 40px;
}
.phperf-perunit[hidden] { display: none; }

.phperf-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ph-radius);
  padding: 8px 12px;
  min-height: 40px;
  cursor: pointer;
  color: var(--ph-accent);
}
.phperf-btn:hover { text-decoration: underline; }
.phperf-btn[hidden] { display: none; }
.phperf-btn:disabled { color: var(--ph-muted); cursor: default; text-decoration: none; }

.phperf-custom { display: inline-flex; gap: 6px; align-items: center; }
.phperf-custom[hidden] { display: none; }

.phperf-summary {
  margin: 12px 0 20px;
  font-size: 16px;
  color: var(--ph-muted);
}

/* ---------- Stat tiles ---------- */

/* Six equal tiles: 3 x 2 on desktop. Profit is first and outlined in the accent. */
.phperf-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.phperf-tile {
  background: var(--ph-card);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  padding: 22px 24px;
  min-width: 0;
}
.phperf-tile .k { font-size: 16px; color: var(--ph-ink-2); }
.phperf-tile .v { font-size: 38px; font-weight: 600; color: var(--ph-ink); line-height: 1.2; margin-top: 6px; overflow-wrap: anywhere; }
.phperf-tile .s { font-size: 15px; color: var(--ph-muted); margin-top: 6px; }
.phperf-tile.hero { border-color: rgba(255, 205, 7, 0.45); }
.phperf .is-pos { color: var(--ph-good); }
.phperf .is-neg { color: var(--ph-bad); }

/* ---------- Cards, tabs, charts ---------- */

.phperf-card {
  background: var(--ph-card);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  padding: 16px;
  margin-bottom: 20px;
}
.phperf-cardhead {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.phperf-h {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  color: var(--ph-ink);
  letter-spacing: normal;
  text-transform: none;
}

.phperf-chart { position: relative; height: 380px; }
.phperf-chart.is-empty canvas { visibility: hidden; }
.phperf-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-muted);
}
.phperf-empty[hidden] { display: none; }

/* ---------- Tables ---------- */

.phperf-tablewrap {
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
}
.phperf table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin: 0;
  background: transparent;
  border: 0;
}
.phperf th, .phperf td {
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--ph-line);
  text-align: left;
  white-space: nowrap;
  background: transparent;
  color: var(--ph-ink);
  vertical-align: middle;
}
.phperf th { color: var(--ph-ink-2); font-weight: 500; font-size: 15px; background: var(--ph-card-2); }
.phperf th button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-weight: inherit;
  border-radius: 0;
}
.phperf th button:hover { color: var(--ph-ink); }
.phperf th[aria-sort="ascending"] button::after { content: " \2191"; color: var(--ph-accent); }
.phperf th[aria-sort="descending"] button::after { content: " \2193"; color: var(--ph-accent); }
.phperf tbody tr:last-child td { border-bottom: 0; }
.phperf tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.phperf td.num, .phperf th.num { text-align: right; font-variant-numeric: tabular-nums; }
.phperf td.bet { white-space: normal; min-width: 220px; }
.phperf td.dim { color: var(--ph-ink-2); }

.phperf-res {
  display: inline-block;
  min-width: 24px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.phperf-res.W { background: rgba(47, 191, 74, 0.16); color: var(--ph-good); }
.phperf-res.L { background: rgba(240, 106, 106, 0.16); color: var(--ph-bad); }
.phperf-res.V { background: rgba(255, 255, 255, 0.08); color: var(--ph-ink-2); }

.phperf-search {
  background: var(--ph-page);
  border: 1px solid var(--ph-line-2);
  border-radius: var(--ph-radius);
  padding: 8px 12px;
  min-height: 40px;
  width: 260px;
  max-width: 100%;
}
.phperf-search::placeholder { color: var(--ph-muted); }

.phperf-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 16px;
  color: var(--ph-muted);
}
.phperf-pager .phperf-btn { padding: 6px 10px; min-height: 36px; }

.phperf-note { font-size: 14px; color: var(--ph-muted); margin: 8px 0 0; }

/* ---------- Graph controls and breakdown table ---------- */

.phperf-splitctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.phperf-ctlabel { font-size: 15px; color: var(--ph-ink-2); }
.phperf-breakdown { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ph-line); }
.phperf-breakdown[hidden] { display: none; }
.phperf-hint { margin: 0 0 8px; font-size: 14px; color: var(--ph-muted); }
.phperf-groups th.mark, .phperf-groups td.mark { width: 44px; padding-right: 0; }
.phperf-swatch { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.phperf-groups tr.is-clickable { cursor: pointer; }
.phperf-groups tr.is-clickable:focus-visible td { outline: 2px solid var(--ph-accent); outline-offset: -2px; }
.phperf-groups tr.is-hl td { background: rgba(255, 205, 7, 0.08); }
.phperf-groups tr.is-hl td:nth-child(2) { font-weight: 600; }

/* ---------- Phone-only pieces (hidden on desktop) ---------- */

.phperf-filterbtn { display: none; }
.phperf-filterset { display: contents; }   /* desktop: the filters sit straight in the row */
.phperf-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  min-height: 48px;
  padding: 8px 2px 10px;
  font-size: 15px;
  color: var(--ph-ink);
  font-variant-numeric: tabular-nums;
}
.phperf-readout strong { color: var(--ph-ink); font-size: 20px; font-weight: 600; }
.phperf-readout span { color: var(--ph-ink-2); }
.phperf-readout[hidden] { display: none; }

.phperf-betcards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.phperf-betcards[hidden] { display: none; }
.phperf-betcard {
  background: var(--ph-card-2);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
  padding: 10px 12px;
}
.phperf-betcard .top { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
.phperf-betcard .bet { color: var(--ph-ink); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.phperf-betcard .meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 14px; color: var(--ph-ink-2); }

/* ---------- Narrower layouts ----------
   These follow the widget's own width (classes set by performance.js), not the window's,
   so the layout is right in any page column and in the phone-sized preview. */

.phperf.is-medium .phperf-tile { padding: 18px; }
.phperf.is-medium .phperf-tile .v { font-size: 30px; }

/* Phones */
.phperf.is-narrow .phperf-card { padding: 12px; }
.phperf.is-narrow .phperf-pop { min-width: 200px; }

/* Filters fold behind one button; the units/$ switch stays beside it. */
.phperf.is-narrow .phperf-filters .phperf-spacer { display: none; }
.phperf.is-narrow .phperf-filterbtn {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 12px;
  background: var(--ph-card);
  border: 1px solid var(--ph-line-2);
  border-radius: var(--ph-radius);
  color: var(--ph-ink);
  cursor: pointer;
}
.phperf.is-narrow .phperf-filterbtn.is-set { border-color: var(--ph-accent); }
.phperf.is-narrow .phperf-filterbtn::after { content: "\25BE"; margin-left: auto; color: var(--ph-ink-2); }
.phperf.is-narrow.filters-open .phperf-filterbtn::after { content: "\25B4"; }
.phperf.is-narrow .phperf-filterset { display: none; }
.phperf.is-narrow.filters-open .phperf-filterset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  order: 10;
  width: 100%;
  padding: 10px;
  background: var(--ph-card);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-radius);
}
.phperf.is-narrow .phperf-filterset > *,
.phperf.is-narrow .phperf-filterset .phperf-ctl { width: 100%; }
.phperf.is-narrow .phperf-custom { display: flex; }
.phperf.is-narrow .phperf-custom[hidden] { display: none; }
.phperf.is-narrow .phperf-custom .phperf-select { flex: 1 1 0; min-width: 0; }
.phperf.is-narrow .phperf-perunit { width: 100%; }
.phperf.is-narrow .phperf-summary { margin: 10px 0 12px; font-size: 14px; }

/* Compact stat tiles: profit full width, then three pairs. */
.phperf.is-narrow .phperf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.phperf.is-narrow .phperf-tile.hero,
.phperf.is-narrow .phperf-tile:last-child { grid-column: 1 / -1; }
.phperf.is-narrow .phperf-tile { padding: 10px 12px; }
.phperf.is-narrow .phperf-tile .k { font-size: 13px; }
.phperf.is-narrow .phperf-tile .v { font-size: 20px; margin-top: 2px; }
.phperf.is-narrow .phperf-tile.hero .v { font-size: 32px; }
.phperf.is-narrow .phperf-tile:not(.hero) .s { display: none; }

.phperf.is-narrow .phperf-chart { height: 280px; }
.phperf.is-narrow .phperf-h { font-size: 17px; line-height: 1.35; }

/* Bet History as cards, newest first. */
.phperf.is-narrow .phperf-search { width: 100%; }

/* Split switch and breakdown table on phones. */
.phperf.is-narrow .phperf-splitctl { width: 100%; }
.phperf.is-narrow .phperf-splitctl .phperf-seg { flex: 1 1 0; }
.phperf.is-narrow .phperf-splitctl .phperf-seg button { flex: 1 1 0; padding: 8px 6px; }
.phperf.is-narrow .phperf-groups .col-bets { display: none; }
.phperf.is-narrow .phperf-groups th, .phperf.is-narrow .phperf-groups td { padding: 9px 8px; }

/* ---------- Password box (while the page has a password) ----------
   Shown by the plugin in place of WordPress's plain form. Built to match the site's banner
   card; the heading and button use the theme's own h1 and .btn styles. */

.phperf-lock {
  background: #1f1726;
  border: 1px solid #47414d;
  border-radius: 20px;
  padding: 64px 40px;
  text-align: center;
}
.phperf-lock h1 { margin: 0 0 18px; }
.phperf-lock-lead {
  max-width: 620px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.45;
  color: #a9a0b2;
}
.phperf-lock-form {
  max-width: 460px;
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.phperf-lock-note { margin: 0 0 14px; font-size: 15px; color: #a9a0b2; }
/* WordPress's own instruction line (and an empty line it adds): replaced by the note above.
   A "wrong password" message, if WordPress shows one, stays visible. */
.phperf-lock .post-password-form > p:not(:has(input)):not([role="alert"]):not([class*="invalid"]) { display: none; }
.phperf-lock .post-password-form > p[role="alert"],
.phperf-lock .post-password-form > p[class*="invalid"] { margin: 0 0 14px; color: #f06a6a; font-size: 15px; }
.phperf-lock .post-password-form p { margin: 0; }
.phperf-lock .post-password-form p:last-of-type {
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
}
.phperf-lock .post-password-form label {
  flex: 1 1 auto;
  display: block;
  margin: 0;
  font-size: 0;               /* hides the "Password:" word; the box has a placeholder */
  text-align: left;
}
.phperf-lock .post-password-form input[type="password"] {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 12px 16px;
  font: inherit;
  font-size: 16px;            /* 16px stops iPhones zooming in on tap */
  color: #fff;
  background: #252129;
  border: 3px solid #0a080d;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #252129;
  outline: 0;
}
.phperf-lock .post-password-form input[type="password"]::placeholder { color: #7d7487; }
.phperf-lock .post-password-form input[type="password"]:focus { box-shadow: 0 0 0 2px #ffcd07; }
.phperf-lock .post-password-form input[type="submit"] {
  flex: 0 0 auto;
  height: 52px;
  margin: 0;
}

@media (max-width: 575px) {
  .phperf-lock { padding: 40px 20px; }
  .phperf-lock-lead { font-size: 15px; }
  .phperf-lock .post-password-form p:last-of-type { flex-direction: column; }
}