/* Pewterkit shared skeleton styles (DESIGN.md §2–§4). Requires tokens.css + fonts.css.
   Class prefix pk-. Tools add page-specific layout only; no local colours, fonts or radii. */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pk-nav-height) + 16px); }
body { margin: 0; background: var(--pk-canvas); color: var(--pk-body);
  font: var(--pk-weight-regular) var(--pk-body-size)/var(--pk-body-lh) var(--pk-font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1,h2,h3 { color: var(--pk-ink); font-weight: var(--pk-weight-strong); margin: 0 0 16px; }
h1 { font-size: var(--pk-h1-size); line-height: var(--pk-h1-lh); letter-spacing: var(--pk-h1-ls); }
h2 { font-size: var(--pk-h2-size); line-height: var(--pk-h2-lh); letter-spacing: var(--pk-h2-ls); }
h3 { font-size: var(--pk-h3-size); line-height: var(--pk-h3-lh); }
p { margin: 0 0 16px; }
small, .pk-small { font-size: var(--pk-small-size); line-height: var(--pk-small-lh); color: var(--pk-muted); }
code, kbd, .pk-mono { font-family: var(--pk-font-mono); font-size: var(--pk-mono-size); }
a { color: var(--pk-accent); text-underline-offset: 3px; transition: color var(--pk-dur-hover) var(--pk-ease); }
a:hover { color: var(--pk-pewter-600); }
:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 3px; border-radius: 4px; }
img, svg { display: block; max-width: 100%; }

.pk-container { width: 100%; max-width: var(--pk-content-max); margin: 0 auto; padding: 0 24px; }
.pk-section { padding: calc(var(--pk-section-gap) / 2) 0; }
.pk-section + .pk-section { border-top: 1px solid var(--pk-hairline); }
.pk-section--surface { background: var(--pk-surface); }

/* nav */
.pk-nav { position: sticky; top: 0; z-index: 50; height: var(--pk-nav-height);
  background: color-mix(in srgb, var(--pk-canvas) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--pk-hairline); }
.pk-nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pk-nav__brand { display: flex; align-items: center; gap: 10px; color: var(--pk-ink); text-decoration: none; font-weight: var(--pk-weight-strong); }
.pk-nav__brand svg { height: 22px; width: auto; }
.pk-nav__tool { color: var(--pk-muted); font-weight: var(--pk-weight-regular); white-space: nowrap; }
.pk-nav__links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.pk-nav__links a { color: var(--pk-body); text-decoration: none; }
.pk-nav__links a:hover { color: var(--pk-ink); }

/* hero = the tool */
.pk-hero { padding: 96px 0 72px; text-align: center; }
.pk-hero__text { max-width: var(--pk-hero-text-max); margin: 0 auto; }
.pk-hero__sub { font-size: calc(var(--pk-body-size) + 2px); color: var(--pk-body); }
.pk-form { display: flex; gap: 8px; max-width: 560px; margin: 32px auto 12px; }
.pk-input { flex: 1; min-height: var(--pk-button-min-height); padding: 0 16px; font: inherit; font-family: var(--pk-font-mono); font-size: 15px;
  color: var(--pk-ink); background: var(--pk-canvas); border: 1px solid var(--pk-pewter-200); border-radius: var(--pk-radius-input);
  transition: border-color var(--pk-dur-hover) var(--pk-ease), box-shadow var(--pk-dur-hover) var(--pk-ease); }
.pk-input:focus { outline: none; border-color: var(--pk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-accent) 22%, transparent); }
.pk-microcopy { font-size: var(--pk-small-size); color: var(--pk-muted); }
.pk-check { display: inline-flex; align-items: flex-start; gap: 8px; font-size: var(--pk-small-size); color: var(--pk-body); text-align: left; }
@media (max-width: 640px) { .pk-hero { padding: 56px 0 48px; } .pk-form { flex-direction: column; } }

/* buttons */
.pk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--pk-button-min-height);
  padding: 0 22px; border-radius: var(--pk-radius-button); border: 1px solid transparent; font: inherit; font-size: 16px;
  font-weight: var(--pk-weight-strong); text-decoration: none; cursor: pointer;
  transition: transform var(--pk-dur-hover) var(--pk-ease), background-color var(--pk-dur-hover) var(--pk-ease), opacity var(--pk-dur-hover) var(--pk-ease); }
.pk-btn--primary { background: var(--pk-accent); color: var(--pk-accent-contrast); }
.pk-btn--primary:hover { opacity: .92; color: var(--pk-accent-contrast); }
.pk-btn--primary:active { transform: translateY(1px); }
.pk-btn--ghost { background: transparent; color: var(--pk-ink); border-color: var(--pk-pewter-200); }
.pk-btn--ghost:hover { background: var(--pk-surface); color: var(--pk-ink); }

/* cards and rows */
.pk-card { background: var(--pk-canvas); border: 1px solid var(--pk-hairline); border-radius: var(--pk-radius-card); padding: 24px; }
.pk-card--raised { box-shadow: var(--pk-shadow-raised); }
.pk-card__label { display: inline-block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--pk-muted); margin-bottom: 8px; }
.pk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pk-row { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.pk-row svg { width: 20px; height: 20px; color: var(--pk-pewter-600); stroke-width: 1.75; }
.pk-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* results (traffic-light colours only here) */
.pk-result--ok { --pk-result: var(--pk-ok); } .pk-result--warn { --pk-result: var(--pk-warn); } .pk-result--bad { --pk-result: var(--pk-bad); }
.pk-score { font-family: var(--pk-font-mono); font-weight: var(--pk-weight-strong); color: var(--pk-result, var(--pk-ink)); }
.pk-ring { --value: 0; width: 120px; height: 120px; }
.pk-ring circle { fill: none; stroke-width: 8; }
.pk-ring .pk-ring__track { stroke: var(--pk-hairline); }
.pk-ring .pk-ring__value { stroke: var(--pk-result, var(--pk-ink)); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%;
  stroke-dasharray: 327; stroke-dashoffset: calc(327 - 327 * var(--value) / 100); transition: stroke-dashoffset var(--pk-dur-score) var(--pk-ease); }
.pk-locked { opacity: .72; filter: saturate(.4); }
.pk-reveal > * { opacity: 0; transform: translateY(var(--pk-reveal-rise)); animation: pk-rise var(--pk-dur-reveal) var(--pk-ease) forwards; }
.pk-reveal > *:nth-child(2) { animation-delay: calc(var(--pk-reveal-stagger) * 1); }
.pk-reveal > *:nth-child(3) { animation-delay: calc(var(--pk-reveal-stagger) * 2); }
.pk-reveal > *:nth-child(4) { animation-delay: calc(var(--pk-reveal-stagger) * 3); }
.pk-reveal > *:nth-child(5) { animation-delay: calc(var(--pk-reveal-stagger) * 4); }
.pk-reveal > *:nth-child(n+6) { animation-delay: calc(var(--pk-reveal-stagger) * 5); }
@keyframes pk-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pk-reveal > * { animation: none; opacity: 1; transform: none; } }

/* prompt block with Copy button (signature interaction) */
.pk-prompt { position: relative; background: var(--pk-surface); border: 1px solid var(--pk-hairline); border-radius: var(--pk-radius-card);
  padding: 20px 20px 56px; font-family: var(--pk-font-mono); font-size: var(--pk-mono-size); color: var(--pk-ink); white-space: pre-wrap; }
.pk-prompt--fade { max-height: 200px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.pk-prompt .pk-btn { position: absolute; right: 12px; bottom: 12px; min-height: 36px; font-size: 14px; }

/* FAQ */
.pk-faq details { border-bottom: 1px solid var(--pk-hairline); padding: 16px 0; }
.pk-faq summary { cursor: pointer; color: var(--pk-ink); font-weight: var(--pk-weight-strong); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.pk-faq summary::-webkit-details-marker { display: none; }
.pk-faq summary::after { content: "+"; color: var(--pk-muted); transition: transform var(--pk-dur-hover) var(--pk-ease); }
.pk-faq details[open] summary::after { transform: rotate(45deg); }
.pk-faq details > *:not(summary) { margin-top: 12px; }

/* CTA band */
.pk-cta { text-align: center; background: var(--pk-surface); border-top: 1px solid var(--pk-hairline); border-bottom: 1px solid var(--pk-hairline); }

/* footer */
.pk-footer { padding: 56px 0 40px; font-size: var(--pk-small-size); color: var(--pk-muted); }
.pk-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.pk-footer h2 { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--pk-ink); margin-bottom: 12px; }
.pk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pk-footer a { color: var(--pk-body); text-decoration: none; }
.pk-footer a:hover { color: var(--pk-ink); text-decoration: underline; }
.pk-footer__legal { border-top: 1px solid var(--pk-hairline); padding-top: 24px; }
.pk-tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 9999px; border: 1px solid var(--pk-hairline); color: var(--pk-muted); }

.pk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }