/* ============================================================================
   PERMA-P score cards — the one stylesheet.

   Loaded by both portal.html (the Wellbeing report) and perma-p.html (the
   results screen at the end of the assessment). They used to carry two sets of
   rules under two sets of names — .score-card/.score-label here,
   .pr-cell/.pr-label there — with no class in common. Every value happened to
   match, so the screens looked the same; nothing made them stay that way. A
   padding or type tweak on one simply did not reach the other.

   The dimension list, labels, notes and grading live in perma-dims.js. This
   file is only the pixels.

   ── Why the --pc-* tokens ───────────────────────────────────────────────────
   The two pages do NOT share a token vocabulary, and one name collides:

     --outline   is #bdc9c8 (the card border) in perma-p.html
     --outline   is #6e7979 (a darker grey) in portal.html, where the card
                 border is --outline-variant instead

   So a shared rule written as var(--outline) would have drawn the portal's
   cards with a visibly darker border — the exact bug this file exists to
   prevent, introduced by the fix for it. Instead the rules below use --pc-*
   names, and each page maps them to its own tokens in :root.

   WHERE the page declares that mapping matters, and it is easy to get wrong
   (I did). A custom property whose value is var(...) resolves in the scope where
   it is DECLARED, and children inherit the already-computed result. The portal
   redefines its tokens on `.app.dark` — a descendant of :root — so a mapping on
   :root would hand every card the LIGHT value forever: measured
   --pc-border:#bdc9c8 while --outline-variant was #3e4949. So portal.html
   declares --pc-* on `.app`, the same element the theme class lands on, and dark
   mode then follows for free. perma-p.html has no dark mode, so :root is correct
   there. Rule of thumb: declare the mapping on the element that carries the theme.

   DEPLOYMENT: ships next to both HTML files — see the three source lists in
   .github/workflows/deploy.yml, same as perma-dims.js. Without it the cards
   render unstyled. It also has to expire with the markup it styles, which is
   why `css` was added to the revalidate FilesMatch in all three .htaccess
   blocks: it was being served `max-age=604800` against `no-cache` HTML, so the
   next rename in here would have met a week-old sheet in a returning browser.

   Required from each page (see above for which element):
     --pc-surface      card background
     --pc-border       card border
     --pc-text         primary ink (sub-label)
     --pc-text-muted   secondary ink (label, unit, note)
     --pc-track        bar track behind the fill
   ========================================================================= */

/* One card per dimension. The number's colour and the fill's width come from
   permaGood/permaGoodColor/permaBarPct in perma-dims.js and arrive inline, so
   they are deliberately absent here. */
.score-card { background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: 12px; padding: 18px 20px }
.score-card.full { grid-column: 1 / -1 }

.score-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-text-muted); margin-bottom: 4px }
.score-dimension { font-size: 14px; font-weight: 600; color: var(--pc-text); margin-bottom: 12px }

.score-num { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-bottom: 8px }
.score-num .score-unit { font-size: 14px; font-weight: 600; color: var(--pc-text-muted) }

.score-bar-track { height: 8px; background: var(--pc-track); border-radius: 99px; overflow: hidden }
.score-bar-fill { height: 100%; border-radius: 99px; width: 0; transition: width .9s cubic-bezier(.25, .8, .25, 1) }

.score-note { font-size: 12px; color: var(--pc-text-muted); margin-top: 6px; line-height: 1.4 }

/* The three single-item measures, full width. Subgrid so label, sub-label,
   number, bar and note line up across the columns however long the text is —
   the five rows are the five children each column renders. A plain flex row let
   them drift, which is how the two screens ended up visibly different. */
.score-negrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px }
.score-negcol { display: grid; grid-template-rows: subgrid; grid-row: span 5 }

/* Single column on narrow screens. The parent grid belongs to each page; only
   the card's own span is set here.
   `screen` on purpose, not a bare width query: an unscoped one also matches the
   print media type, and would collapse the full-width card on any page box under
   560px — perma-p.html used to force `1 / -1` back explicitly inside @media
   print for exactly this reason. Narrowing the query keeps that guarantee
   without a second rule to keep in sync. */
@media screen and (max-width: 560px) {
  .score-card.full { grid-column: 1 }
}

@media (prefers-reduced-motion: reduce) {
  .score-bar-fill { transition: none }
}

/* Bars are the data — keep them when printing a report. */
@media print {
  .score-bar-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact }
}