/* Piotroski F-Score page.
   Shares the hero, bands, controls, chips and accordion styles with the Sustainable Dividend page
   (css/sustainable-dividends.css, loaded first) and the methodology table with css/earnings-quality.css;
   this file adds what is specific here: the score histogram, the nine-dot scorecard row and the score badge. */

/* ---------------- the score histogram (hero) ---------------- */
.pf-hist{ display:grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap:8px; align-items:end; height:150px; margin:6px 0 4px; }
.pf-bar{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; height:100%; padding:0; border:0; background:none; cursor:pointer; color:inherit; font:inherit;
}
.pf-bar:disabled{ cursor:default; opacity:.45; }
.pf-bar-fill{
  display:block; height:var(--h); min-height:2px; border-radius:6px 6px 2px 2px; background: var(--seg);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset; transition: filter .15s ease, transform .15s ease;
}
.pf-bar:not(:disabled):hover .pf-bar-fill, .pf-bar:not(:disabled):focus-visible .pf-bar-fill{ filter: brightness(1.18); transform: translateY(-2px); }
.pf-bar:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:6px; }
.pf-bar-n{ order:-1; margin-bottom:4px; text-align:center; font-size:12px; font-weight:800; font-variant-numeric: tabular-nums; color:#fff; }
.pf-bar-k{ margin-top:6px; text-align:center; font-size:12px; font-weight:800; color: rgba(255,255,255,0.6); }

/* ---------------- scorecard rows ---------------- */
.pf-table{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.pf-head-row, .pf-row{
  display:grid; align-items:center; column-gap:16px;
  grid-template-columns: 40px minmax(190px, 1.4fr) minmax(300px, 2fr) minmax(110px, .7fr) 96px;
}
.pf-head-row{ padding:12px 6px 10px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.42); }
.pf-head-row .c-score{ text-align:right; }
.pf-row{ padding:15px 6px; border-bottom:1px solid rgba(255,255,255,0.08); cursor:pointer; transition: background .15s ease; animation: sd-in .35s ease both; }
.pf-row:hover{ background: rgba(255,255,255,0.035); }
@media (prefers-reduced-motion: reduce){ .pf-row{ animation:none; } }
.pf-row .c-cells{ display:flex; gap:18px; flex-wrap:wrap; }
.pf-row .c-score{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.pf-note{ margin-top:4px; font-size:11.5px; color: rgba(255,255,255,0.55); }
.pf-fy{ font-size:11px; color: rgba(255,255,255,0.42); cursor:help; white-space:nowrap; }

/* nine pass / fail dots in three labelled groups: state never rests on colour alone (a glyph sits in each) */
.pf-grp{ display:flex; flex-direction:column; gap:5px; }
.pf-grp-lbl{ font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.4); }
.pf-dots{ display:flex; gap:5px; }
.pf-dot{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; cursor:help;
  font-style:normal; font-size:12px; font-weight:800; line-height:1;
}
.pf-dot--pass{ background: rgba(47,214,120,0.16); color:#6FE3A5; box-shadow: inset 0 0 0 1px rgba(47,214,120,0.4); }
.pf-dot--fail{ background: rgba(255,107,87,0.92); color:#240B07; }
.pf-dot--na{ background:transparent; color: rgba(255,255,255,0.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
.pf-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* the score by year */
.pf-trend{ display:inline-flex; align-items:center; gap:5px; font-variant-numeric: tabular-nums; cursor:help; }
.pf-t{ font-size:14px; font-weight:700; color: rgba(255,255,255,0.55); }
.pf-t--now{ color:#fff; font-weight:800; }
.pf-trend i{ font-style:normal; font-size:13px; color: rgba(255,255,255,0.3); }
.pf-trend-note{ display:block; margin-top:3px; font-size:11px; color: rgba(255,255,255,0.46); }
.c-trend small{ font-size:11px; color: rgba(255,255,255,0.46); }

/* the score badge */
.pf-score{
  display:inline-flex; align-items:baseline; gap:4px; padding:5px 12px; border-radius:999px; cursor:help; white-space:nowrap; border:1px solid transparent;
}
.pf-score b{ font-size:20px; font-weight:800; line-height:1; font-variant-numeric: tabular-nums; }
.pf-score small{ font-size:11px; font-weight:700; opacity:.7; }
.pf-score--strong{ background: rgba(47,214,120,0.12); border-color: rgba(47,214,120,0.38); color:#E8FBF0; }
.pf-score--good{ background: rgba(143,214,111,0.1); border-color: rgba(143,214,111,0.34); color:#F0FBE8; }
.pf-score--mid{ background: rgba(255,194,87,0.1); border-color: rgba(255,194,87,0.36); color:#FFF3DA; }
.pf-score--weak{ background: rgba(255,107,87,0.12); border-color: rgba(255,107,87,0.4); color:#FFE9E5; }

.pf-movers{ display:grid; grid-template-columns: minmax(0,1fr); gap:28px; }

/* ---------------- narrow screens: the row becomes a card ---------------- */
@media (max-width: 960px){
  .pf-head-row{ display:none; }
  .pf-row{ grid-template-columns: 32px minmax(0,1fr) auto; row-gap:12px; }
  .pf-row .c-cells{ grid-column: 1 / -1; order:3; gap:14px; }
  .pf-row .c-trend{ grid-column: 2 / 3; order:4; }
  .pf-row .c-score{ grid-column: 3; grid-row: 1; }
}
@media (max-width: 520px){
  .pf-hist{ gap:5px; height:130px; }
  .pf-dot{ width:26px; height:26px; }
}
.pf-sub{ margin:0 0 6px; font-size:15px; font-weight:800; color:#fff; }