/* Prognosis Engine — structural styles.
 * ---------------------------------------------------------------------
 * EVERY visual decision routes through a --pg-* custom property with a
 * neutral fallback. Sites MUST override these (footprint rule — see
 * ADAPT.md). Never edit this file per site; skin via variables only.
 * Covers all four elements: <pg-season>, <pg-match>, <pg-value>, <pg-acca>.
 * --------------------------------------------------------------------- */

pg-season, pg-match, pg-value, pg-acca {
  display: block;
  font-family: var(--pg-font, inherit);
  color: var(--pg-ink, #222833);
}

/* SEO fallback: visible until JS upgrades, then sr-only for crawlers. */
pg-season.pg-enhanced .pg-fallback,
pg-match.pg-enhanced .pg-fallback,
pg-value.pg-enhanced .pg-fallback,
pg-acca.pg-enhanced .pg-fallback {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.pg-stage {
  position: relative;
  border: var(--pg-border, 1px solid #d9dde4);
  border-radius: var(--pg-radius, 10px);
  background: var(--pg-bg, #fbfbfc);
  padding: var(--pg-pad, 1.1rem);
}

.pg-heading { font-size: 1.05rem; margin: 0 0 .7rem; }

/* --- form / fields ------------------------------------------------------ */
.pg-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem .7rem;
  align-items: end;
  margin: 0 0 1rem;
}
.pg-field { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.pg-field-label {
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--pg-muted, #6a7280);
}
.pg-input {
  font: inherit; font-size: .92rem;
  color: var(--pg-ink, #222833);
  background: var(--pg-input-bg, #fff);
  border: var(--pg-input-border, 1px solid #c8cdd6);
  border-radius: var(--pg-input-radius, 7px);
  padding: .42rem .55rem;
  min-width: 0; width: 100%;
  box-sizing: border-box;
}
.pg-input:focus-visible { outline: 2px solid var(--pg-focus, #1a1a1a); outline-offset: 1px; }

/* odds groups in the value finder */
.pg-form-odds { grid-template-columns: 1fr; gap: .8rem; }
.pg-odds-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .5rem .6rem;
  border: var(--pg-group-border, 1px solid #e3e7ee);
  border-radius: var(--pg-input-radius, 7px);
  padding: .6rem .7rem .7rem;
  margin: 0;
}
.pg-odds-legend {
  font-size: .74rem;
  letter-spacing: .03em;
  color: var(--pg-muted, #6a7280);
  padding: 0 .3rem;
}

/* --- buttons ------------------------------------------------------------ */
.pg-actions { margin: .8rem 0 0; }
.pg-btn {
  font: inherit; font-size: .9rem;
  white-space: nowrap;
  padding: .45rem .9rem;
  color: var(--pg-btn-ink, #fff);
  background: var(--pg-btn-bg, #2c4a6e);
  border: var(--pg-btn-border, 1px solid transparent);
  border-radius: var(--pg-btn-radius, 7px);
  cursor: pointer;
}
.pg-btn:hover { background: var(--pg-btn-bg-hover, #24405f); }
.pg-btn:focus-visible { outline: 2px solid var(--pg-focus, #1a1a1a); outline-offset: 1px; }
.pg-btn-small {
  font-size: .78rem;
  padding: .22rem .55rem;
  color: var(--pg-btn2-ink, #222833);
  background: var(--pg-btn2-bg, #e7eaef);
}
.pg-btn-small:hover { background: var(--pg-btn2-bg-hover, #dde1e8); }

/* --- tables ------------------------------------------------------------- */
.pg-table-wrap { overflow-x: auto; }
.pg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.pg-table th {
  text-align: left;
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--pg-muted, #6a7280);
  padding: .38rem .5rem;
  border-bottom: var(--pg-table-rule, 2px solid #d9dde4);
}
.pg-table td {
  padding: .42rem .5rem;
  border-bottom: var(--pg-table-rule-light, 1px solid #e6e9ee);
}
.pg-table th.pg-num, .pg-table td.pg-num { text-align: right; font-variant-numeric: tabular-nums; }
.pg-th-rank { width: 2rem; color: var(--pg-muted, #6a7280); }
.pg-team { font-weight: var(--pg-team-weight, 600); }
.pg-strong { font-weight: var(--pg-value-weight, 650); }
.pg-muted { color: var(--pg-muted, #6a7280); }
.pg-pos { color: var(--pg-pos, #276b46); font-weight: var(--pg-value-weight, 650); }
.pg-neg { color: var(--pg-neg, #a33131); }

/* --- probability bars ---------------------------------------------------- */
.pg-col-bar { min-width: 130px; }
.pg-bar {
  position: relative;
  height: var(--pg-bar-h, 18px);
  background: var(--pg-bar-track, #eceef2);
  border-radius: var(--pg-bar-radius, 4px);
  overflow: hidden;
}
.pg-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--pg-bar-fill, #5a7ba6);
  border-radius: var(--pg-bar-radius, 4px);
}
.pg-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: .4rem;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--pg-bar-ink, #222833);
  mix-blend-mode: var(--pg-bar-blend, normal);
}

/* --- match center -------------------------------------------------------- */
.pg-match-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 .8rem;
}
.pg-match-team { font-size: 1.1rem; font-weight: var(--pg-team-weight, 600); }
.pg-match-vs { font-size: .8rem; color: var(--pg-muted, #6a7280); }
.pg-sec { margin: 0 0 1.2rem; }
.pg-sec-title {
  font-size: .82rem;
  letter-spacing: .03em;
  text-transform: var(--pg-sec-transform, uppercase);
  color: var(--pg-muted, #6a7280);
  margin: 0 0 .45rem;
}
.pg-inline-stat { font-size: .88rem; margin: 0 0 .4rem; }
.pg-scores { display: flex; flex-wrap: wrap; gap: .45rem; }
.pg-score-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-width: 62px;
  padding: .45rem .6rem;
  background: var(--pg-chip-bg, #eef0f4);
  border: var(--pg-chip-border, 1px solid transparent);
  border-radius: var(--pg-chip-radius, 8px);
}
.pg-score-val { font-size: 1.05rem; font-weight: var(--pg-value-weight, 650); font-variant-numeric: tabular-nums; }
.pg-score-p { font-size: .72rem; color: var(--pg-muted, #6a7280); }

/* --- value finder --------------------------------------------------------- */
.pg-filter {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  margin: 0 0 .8rem;
  cursor: pointer;
}
.pg-filter input { accent-color: var(--pg-btn-bg, #2c4a6e); }

/* --- acca slip ------------------------------------------------------------ */
.pg-legs { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.pg-leg {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  background: var(--pg-tile-bg, #f1f3f6);
  border-radius: var(--pg-tile-radius, 8px);
  font-size: .86rem;
}
.pg-leg-label { flex: 1; min-width: 0; }
.pg-leg-meta { color: var(--pg-muted, #6a7280); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-field-stake { max-width: 160px; margin: 0 0 .8rem; }
.pg-warn {
  font-size: .84rem;
  line-height: 1.45;
  margin: 0 0 .8rem;
  padding: .5rem .65rem;
  border-radius: var(--pg-tile-radius, 8px);
  background: var(--pg-warn-bg, #f6f0e6);
  color: var(--pg-warn-ink, #7a5a1f);
}

/* --- stat tiles ------------------------------------------------------------ */
.pg-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .55rem;
  margin: 0;
}
.pg-tile {
  background: var(--pg-tile-bg, #f1f3f6);
  border: var(--pg-tile-border, 1px solid transparent);
  border-radius: var(--pg-tile-radius, 8px);
  padding: .55rem .65rem;
}
.pg-tile-label {
  font-size: .68rem;
  letter-spacing: .02em;
  color: var(--pg-muted, #6a7280);
  margin: 0 0 .18rem;
}
.pg-tile-value {
  font-size: 1.1rem;
  font-weight: var(--pg-value-weight, 650);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* --- verdict + notes -------------------------------------------------------- */
.pg-verdict {
  font-size: .95rem;
  line-height: 1.5;
  margin: 0 0 .9rem;
}
.pg-note {
  font-size: .8rem;
  line-height: 1.45;
  margin: .8rem 0 0;
  color: var(--pg-muted, #6a7280);
}

/* --- small screens ----------------------------------------------------------- */
@media (max-width: 560px) {
  .pg-form { grid-template-columns: repeat(2, 1fr); }
  .pg-tiles { grid-template-columns: repeat(2, 1fr); }
  .pg-col-bar { min-width: 90px; }
}