/* power-check-page.css — /power-check. Loaded after check-page.css, so the
   form, the swing tag and the next step are /check's own. Only what this
   page adds is here: the working beside the tag, and the other schedules. */

.check #kwh, .check #kw, .check #days { font: 500 20px var(--mono) !important; }
.field[hidden] { display: none; }

/* the working, beside the tag */
.pc-sub { font: 480 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.pc-lines { margin: 0 0 28px; }
.pc-lines__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.pc-lines__row dt { font-size: 15px; }
.pc-lines__row dd { margin: 0; font: 500 16px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.pc-lines__row .pc-lines__how { grid-column: 1 / -1; font: 400 13px/1.5 var(--body); color: var(--ink-soft); text-align: left; }
.pc-lines__row--total { border-bottom: 0; border-top: 1px solid var(--rule-strong); margin-top: 4px; }
.pc-lines__row--total dt { font-weight: 500; }
.pc-lines__row:has(+ .pc-lines__row--total) { border-bottom: 0; }
#verdict-body p + p { margin-top: 1rem; }

/* one line on the other schedules: counted, never named or priced */
.pc-fit { margin-top: clamp(3.5rem, 7vw, 5.5rem); max-width: 48rem; }
.pc-fit__line { font: 480 clamp(19px, 1.6vw, 22px)/1.5 var(--display); max-width: 44ch; }
.pc-fig__run { display: inline-block; text-align: right; }
/* the one count line on the tag: quiet, like the tag's own notes */
.tag--verdict .pc-tagline { font: 400 13px/1.5 var(--mono); color: #5E6477; margin-top: 14px; }
.tag--verdict .pc-tagline .link-quiet { color: inherit; border-bottom: 1px solid currentColor; }

/* motion: the site's own (scenes.css: opacity 500ms ease, transform 600ms
   cubic-bezier(.2,.8,.2,1), a 12px rise). The working settles in, the
   figures count up (power-check.mjs), the line on other schedules comes
   last. Transform and opacity only, so nothing shifts. */
@keyframes pc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#verdict-body, .pc-fit, .next { opacity: 1; }
#verdict.is-in #verdict-body { animation: pc-rise 600ms cubic-bezier(.2,.8,.2,1) 120ms backwards; }
#verdict.is-in .pc-fit { animation: pc-rise 600ms cubic-bezier(.2,.8,.2,1) 700ms backwards; }
#verdict.is-in .next { animation: pc-rise 600ms cubic-bezier(.2,.8,.2,1) 850ms backwards; }
@media (prefers-reduced-motion: reduce) {
  #verdict.is-in #verdict-body, #verdict.is-in .pc-fit, #verdict.is-in .next { animation: none; }
}

@media (max-width: 640px) {
  .pc-lines__row { grid-template-columns: 1fr; }
  .pc-lines__row dd { text-align: left; }
  .pc-fig__run { text-align: left; }
}