/* check-page.css — /check as "The Swing Tag" (Vera, Sep 28 2026). The page
   writes the processor's printed price out for the owner's month, like a
   shop's price tag: a price, never a verdict. CSS only; check.mjs, its ids
   and its wording rules are untouched. */
.check { --tag: #F4F1EA; --tag-ink: #1A1D2B; }
.kick-tag { font-size: 13px; color: #9AA3B7; margin-bottom: 14px; }
.tag-hero { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.tag { position: relative; background: var(--tag); color: var(--tag-ink); padding: 44px 28px 26px;
  clip-path: polygon(22% 0, 78% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); }
.tag__string { position: absolute; left: 50%; top: -56px; height: 70px; width: 1px; background: #ECEEF4; transform-origin: top; }
.tag__eye { position: absolute; left: 50%; top: 14px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 1px solid var(--tag-ink); }
.tag--blank { margin-top: 0; }
.tag__h { font: 480 15px var(--display); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.tag__line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0 6px; border-bottom: 1px solid var(--tag-ink); font: 500 14px var(--mono); }
.tag__line b { flex: 1; }
.tag__foot { font-size: 12px; color: #5E6477; text-align: center; margin-top: 16px; }
/* the string sits outside the clipped tag: draw it on a wrapper-less tag with a pseudo line */
.tag { overflow: visible; }
.taghang { position: relative; padding-top: 60px; }
.taghang::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 64px; background: rgba(236,238,244,.8); z-index: 1; }
.taghang--blank { width: min(300px, 100%); justify-self: center; margin-top: 20px; }
.taghang--verdict { transform-origin: 50% 0; }
.tag__string { display: none; }

/* the verdict tag */
.tag--verdict { margin-top: 0; padding: 46px 30px 28px; }
#verdict-heading { font: 480 15px var(--display) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--tag-ink) !important; text-align: center; margin-bottom: 8px; }
.tag--verdict .bignum__row { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--tag-ink); }
.tag--verdict dt { font-size: 14px; color: #5E6477 !important; }
.tag--verdict dd.bignum__value { font: 500 clamp(32px, 4vw, 44px)/1.05 var(--mono) !important; color: var(--tag-ink) !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tag--verdict .bignum__value--bad { color: var(--tag-ink) !important; }
.tag--verdict .bignum__note { display: block; font: 400 13px var(--mono); opacity: .7; margin-top: 4px; }
.tag--verdict .verdict__send { margin-top: 22px; }
.tag--verdict #verdict-send { background: var(--tag-ink) !important; color: var(--tag) !important; }
@keyframes swing { from { transform: rotate(-7deg); } to { transform: none; } }

/* the form as a fill-in slip */
.check .field label { font: 480 15px var(--body); }
.check .field input, .check .field select { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(236,238,244,.6) !important; border-radius: 0 !important; padding: 10px 0 !important; min-height: 48px; }
.check .field input:focus, .check .field select:focus { border-bottom-width: 2px !important; outline: none; }
.check .field input:focus-visible, .check .field select:focus-visible { outline: 2px solid #ECEEF4; outline-offset: 4px; }
.check #volume, .check #ticket, .check #fees { font: 500 20px var(--mono) !important; }
.check .microcopy { font-size: 13px; opacity: .72; max-width: 44ch; }
/* The utility and schedule notes carry instructions: full contrast. */
.check #utility-note, .check #schedule-note { opacity: 1; }
.check #error { color: #ECEEF4; border-left: 2px solid #D6454F; padding-left: 12px; background: none; }
@media (max-width: 640px) { .taghang--blank { display: none; } .tag-hero { grid-template-columns: 1fr; } .check button[type="submit"] { width: 100%; justify-content: center; } }
.tag--verdict .bignum__note { opacity: 1; color: #5E6477; }

/* motion on arrival, both checkers (/check and /power-check): the heading
   settles in line by line, the form follows, the blank tag swings in on its
   string and then sways, barely, like a tag hung on a hook. On a result the
   tag swings in and sways, the figures count up (check.mjs,
   power-check.mjs), and the text under it rises in. Transform and opacity
   only; off under reduced motion. */
@keyframes ck-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ck-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.2deg); } }
.check .tag-hero > div:first-child > * { animation: ck-rise 700ms cubic-bezier(.2,.8,.2,1) backwards; }
.check .tag-hero > div:first-child > :nth-child(2) { animation-delay: 90ms; }
.check .tag-hero > div:first-child > :nth-child(3) { animation-delay: 180ms; }
.check #step-form { animation: ck-rise 700ms cubic-bezier(.2,.8,.2,1) 300ms backwards; }
.check .taghang--blank { transform-origin: 50% 0; animation: swing 1100ms cubic-bezier(.3,1.4,.5,1) 200ms backwards, ck-sway 7s ease-in-out 1300ms infinite; }
#verdict:not([hidden]) .taghang--verdict { animation: swing 900ms cubic-bezier(.3,1.4,.5,1) both, ck-sway 7s ease-in-out 900ms infinite; }
#verdict.is-in #verdict-body { animation: ck-rise 600ms cubic-bezier(.2,.8,.2,1) 120ms backwards; }
#verdict.is-in .next { animation: ck-rise 600ms cubic-bezier(.2,.8,.2,1) 850ms backwards; }
@media (prefers-reduced-motion: reduce) {
  .check .tag-hero > div:first-child > *, .check #step-form, .check .taghang--blank,
  #verdict:not([hidden]) .taghang--verdict, #verdict.is-in #verdict-body, #verdict.is-in .next { animation: none !important; }
}