/* Site Check additions on top of oynk.css (served unchanged). Only OYNK tokens are used here. */

/* style="--mark:…" on the oynk.co.uk nav, as attributes this site's CSP allows */
[data-mark="lilac"] { --mark: var(--lilac); }
[data-mark="peach"] { --mark: var(--peach); }
[data-mark="mint"] { --mark: var(--mint); }
[data-mark="butter"] { --mark: var(--butter); }

main:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc-band { padding-block: 0 clamp(3rem, 8vw, 6rem); }

/* Start view */
.sc-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 960px) { .sc-layout { grid-template-columns: minmax(0, 1fr); } }
.sc-layout .enquiry { max-width: none; }
.enquiry__row .hint { margin: 0; font-size: .875rem; color: var(--ink-dim); }
.enquiry__row label .opt, .sc-check .opt { font-weight: 400; color: var(--ink-dim); }
.sc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
@media (max-width: 600px) { .sc-pair { grid-template-columns: minmax(0, 1fr); } }
.sc-checks { border: 0; margin: 0; padding: 0; display: grid; gap: .75rem; min-width: 0; }
.sc-check { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .875rem 1rem; border: 1px solid var(--line-hi); border-radius: var(--r-sm); background: var(--raised); }
.sc-check:has(input:checked) { border-color: var(--butter); }
.sc-check:has(input:focus-visible) { outline: 3px solid var(--lilac); outline-offset: 3px; }
.sc-check input { width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--butter); }
.sc-check input:focus-visible { outline: none; }
.sc-check label { font-size: .9375rem; color: var(--ink); }
.sc-scope { margin: 0; padding: 1rem 1.25rem; border-radius: var(--r-sm); background: var(--raised); border-left: 4px solid var(--butter); color: var(--ink-dim); font-size: .9375rem; }
.sc-scope strong { color: var(--ink); }
.sc-turnstile:not(:empty) { min-height: 65px; }
.sc-aside h2.title + * { margin-top: 1rem; }
.sc-aside h2.title:not(:first-child) { margin-top: 2rem; }
.sc-aside ul { margin: 0; padding-left: 1.125rem; color: var(--ink-dim); }
.sc-aside li { margin-bottom: .625rem; }
.sc-aside li strong { color: var(--ink); font-weight: 600; }
.sc-aside p { color: var(--ink-dim); margin: 0; }
main a:not(.btn):not(.wordmark) { color: var(--ink); text-decoration-color: var(--lilac); text-underline-offset: .2em; }

/* Errors (oynk.co.uk marks invalid fields in peach) */
.sc-errors { padding: 1rem 1.25rem; border: 2px solid var(--peach); border-radius: var(--r-sm); background: var(--raised); }
.sc-errors h2 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 .5rem; }
.sc-errors ul { margin: 0; padding-left: 1.125rem; }
main .sc-errors a:not(.btn) { color: var(--peach); text-decoration-color: var(--peach); font-weight: 600; }
.sc-errors:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }
.field-error { margin: 0; color: var(--peach); font-weight: 600; font-size: .9375rem; }
.has-error input[type=text], .has-error input[type=email] { border-color: var(--peach) !important; }
.has-error.sc-checks .sc-check:first-of-type { border-color: var(--peach); }

/* Check view */
.sc-progress { display: grid; gap: 1rem; max-width: 46rem; }
.sc-progress .title { margin: 0; }
.sc-meter { height: 10px; border-radius: var(--r-pill); background: var(--raised-2); overflow: hidden; border: 1px solid var(--line-hi); }
.sc-meter__fill { height: 100%; width: 2%; background: var(--butter); transition: width .6s var(--ease); }
:root[data-motion=reduced] .sc-meter__fill { transition: none; }
.sc-progress p { margin: 0; color: var(--ink-dim); }
.sc-progress p strong { color: var(--ink); }

.sc-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 2.75rem); }
.sc-result > *, .sc-layout > * { min-width: 0; }
.sc-result > * { margin: 0; }
.sc-result h2.title { margin-bottom: 1rem; }
.sc-result p { color: var(--ink-dim); }
.sc-result p strong { color: var(--ink); }
.sc-scope-block { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-card); background: var(--raised); border: 2px solid var(--butter); }
.sc-scope-block .title { color: var(--butter); }
.sc-scope-block p { margin: .5rem 0 0; }
.sc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.sc-tile { background: var(--raised); border-radius: var(--r-card); padding: 1.5rem; }
.sc-tile b { display: block; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--ink); margin-bottom: .5rem; }
.sc-tile--alert b { color: var(--peach); }
.sc-tile span { color: var(--ink-dim); font-size: .9375rem; }
.sc-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sc-issues li { background: var(--raised); border-radius: var(--r-sm); padding: 1rem 1.25rem; border-left: 4px solid var(--peach); }
.sc-issues strong { color: var(--ink); font-weight: 600; }
.sc-issues .meta { display: block; color: var(--ink-dim); font-size: .875rem; margin-top: .25rem; }
.table-scroll { overflow-x: auto; }
.sc-table { width: 100%; border-collapse: collapse; background: var(--raised); border-radius: var(--r-sm); overflow: hidden; }
.sc-table th, .sc-table td { padding: .875rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.sc-table thead th { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.sc-table td { color: var(--ink); }
.sc-small { font-size: .875rem; }

/* The lilac call-out, as oynk.co.uk's founder note band */
.sc-cta { --ink: #141414; --ink-dim: #2b2a24; background: var(--lilac); color: #141414; border-radius: calc(var(--r-card) + 8px); box-shadow: 0 8px #8f73d9; padding: clamp(1.75rem, 5vw, 3rem); color-scheme: light; }
.sc-cta .statement { font-size: clamp(1.625rem, 3.4vw, 2.75rem); margin: 0 0 1rem; }
.sc-cta p { color: #2b2a24; margin: 0 0 1.25rem; max-width: 52ch; }
.sc-cta .btn:hover { background: #fff; border-color: #fff; color: #141414; }
.sc-cta :where(a, button):focus-visible { outline: 3px solid #141414; outline-offset: 3px; }
main .sc-cta a:not(.btn) { color: #141414; text-decoration-color: #141414; }
.sc-failed { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-card); background: var(--raised); border: 2px solid var(--peach); max-width: 46rem; }
.sc-failed p { color: var(--ink-dim); }

/* Privacy notice */
.sc-prose { max-width: 46rem; }
.sc-prose h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; margin: 2.5rem 0 .75rem; }
.sc-prose p, .sc-prose li { color: var(--ink-dim); }
.sc-prose strong, .sc-prose code { color: var(--ink); }
.sc-prose ul { padding-left: 1.125rem; }

/* Fixes after visual review */
.sc-cta .btn { background: #141414; border-color: #141414; color: #fff; }
.sc-errors, #check-h, #result { scroll-margin-top: 7rem; }
@media (max-width: 480px) { .sc-table th, .sc-table td { padding: .75rem .625rem; } }
.sc-select { width: 100%; min-height: var(--tap); padding: .75rem 1rem; font: 400 1rem/1.5 var(--sans); color: var(--ink); background: var(--raised); border: 1px solid var(--line-hi); border-radius: var(--r-sm); }