/* Shared skin for the sample set. Each page sets its own tokens
   (--paper, --ink, --accent, fonts) and this file maps them onto Scrollcraft. */
:root{
  --paper:oklch(98% .005 85); --surface:oklch(99.5% .003 85); --sand:oklch(93% .02 80);
  --ink:oklch(22% .012 250); --ink-2:oklch(46% .015 250); --line:oklch(22% .012 250 / .18);
  --night:oklch(18% .02 250); --accent:oklch(45% .09 35); --accent-ink:oklch(99% .003 85);
  --ease-hero:cubic-bezier(.22,1,.36,1); --ease-reveal:cubic-bezier(.25,.8,.3,1);
  --sc-canvas:var(--paper); --sc-surface:var(--surface); --sc-ink:var(--ink); --sc-ink-soft:var(--ink-2);
  --sc-accent:var(--accent); --sc-accent-ink:var(--accent-ink);
  --sc-font-display:var(--font-d); --sc-font-text:var(--font-b);
  --sc-hairline:var(--line); --sc-shadow-color:250 30% 10%;
  --bar-h:64px;
}
html{scroll-padding-top:calc(var(--bar-h) + 16px)}
body{background:var(--paper);color:var(--ink);font-family:var(--font-b);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* [data-sc-in] reveals use the AMAC curve */
[data-sc-in],[data-sc-stagger]>*{transition-duration:.35s!important;transition-timing-function:var(--ease-reveal)!important}

/* sticky glass header */
.bar{position:fixed;inset:0 0 auto 0;z-index:80;height:var(--bar-h);display:flex;align-items:center;gap:16px;
  justify-content:space-between;padding-inline:var(--sc-gutter);
  background:color-mix(in oklab,var(--paper) 90%,transparent);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);transition:background .3s,border-color .3s}
.bar__mark{display:flex;flex-direction:column;line-height:1.1;text-decoration:none}
.bar__mark b{font-family:var(--font-d);font-weight:650;font-size:1.05rem;letter-spacing:-.01em}
.bar__mark span{font-size:.75rem;color:var(--ink-2)}
.bar nav{display:flex;gap:24px;font-size:.92rem}
.bar nav a{text-decoration:none;color:var(--ink-2)}
.bar nav a:hover{color:var(--ink)}
@media (max-width:860px){.bar nav{display:none}}

/* buttons: 48px minimum tap target */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.7em 1.3em;
  border-radius:var(--btn-r,6px);font:600 .95rem/1.1 var(--font-b);text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease-reveal)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:color-mix(in oklab,var(--accent) 86%,var(--ink))}
.btn--ghost{border-color:color-mix(in oklab,var(--ink) 35%,transparent);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink)}
.btn--light{background:var(--surface);color:var(--ink)}
.btn--outline-light{border-color:rgb(255 255 255 / .7);color:#fff;background:rgb(255 255 255 / .04)}
.btn--outline-light:hover{background:rgb(255 255 255 / .14)}
.btn--sm{min-height:44px;padding:.55em 1em;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.eyebrow{display:flex;align-items:center;gap:12px;font-size:.82rem;font-weight:500;letter-spacing:.02em;margin:0 0 20px}
.eyebrow::before{content:"";width:40px;height:1px;background:currentColor;opacity:.8;transform-origin:left;animation:rule-in .8s var(--ease-hero) .2s both}
.micro{font-size:.8rem;opacity:.85;margin:16px 0 0}

/* hero entrance (AMAC / Rise curves) */
@keyframes photo-settle{from{transform:scale(1.06)}to{transform:none}}
@keyframes hero-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
@keyframes rule-in{from{transform:scaleX(0)}to{transform:none}}
@keyframes clip-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.enter-rise{animation:hero-rise 1s var(--ease-hero) both}
.enter-fade{animation:hero-fade .8s var(--ease-hero) both}
.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}.d4{animation-delay:.6s}

/* fixed sample badge */
.sample-badge{position:fixed;left:12px;bottom:12px;z-index:90;background:var(--accent);color:var(--accent-ink);
  font:600 .72rem/1 var(--font-b);letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-radius:6px;
  box-shadow:var(--sc-e2)}

/* quiz: one question at a time (Rise pattern) */
.quiz{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,4vw,40px);box-shadow:var(--sc-e2);max-width:40rem}
.quiz__meta{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ink-2);margin-bottom:10px}
.quiz__track{height:4px;background:color-mix(in oklab,var(--ink) 10%,transparent);border-radius:4px;overflow:hidden;margin-bottom:26px}
.quiz__track i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease-reveal)}
.quiz fieldset{border:0;margin:0;padding:0;min-width:0}
.quiz__step[hidden]{display:none}
.quiz__step{animation:hero-fade .3s ease both}
.quiz legend{font:600 clamp(1.25rem,1.1rem + .6vw,1.6rem)/1.2 var(--font-d);margin-bottom:18px;padding:0;letter-spacing:-.01em}
.quiz__opts{display:grid;gap:10px}
.quiz__opt{position:relative;display:flex;align-items:center;min-height:52px;padding:12px 18px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;background:var(--paper);transition:border-color .2s,background-color .2s}
.quiz__opt:hover{border-color:color-mix(in oklab,var(--accent) 60%,var(--line))}
.quiz__opt input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.quiz__opt:has(input:checked){border-color:var(--accent);background:color-mix(in oklab,var(--accent) 8%,var(--paper))}
.quiz__opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.quiz__opt input[type=checkbox]+span::before{content:"";display:inline-block;width:18px;height:18px;border:1.5px solid var(--ink-2);border-radius:4px;margin-right:12px;vertical-align:-3px}
.quiz__opt input[type=checkbox]:checked+span::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--paper)}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label,.field .lbl{font-size:.88rem;font-weight:600}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{font:inherit;font-size:1rem;min-height:48px;padding:10px 14px;border:1px solid color-mix(in oklab,var(--ink) 30%,transparent);
  border-radius:8px;background:var(--paper);color:var(--ink);width:100%}
.field textarea{min-height:88px;resize:vertical}
.field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:oklch(50% .18 25)}
.field .hint{font-size:.8rem;color:var(--ink-2)}
.err{color:oklch(48% .17 25);font-size:.84rem;font-weight:500;min-height:0}
.err:empty{display:none}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.82rem;color:var(--ink-2);line-height:1.5;margin:6px 0 18px}
.consent input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--accent)}
.quiz__nav{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:22px}
.quiz__back{background:none;border:0;font:500 .92rem var(--font-b);color:var(--ink-2);cursor:pointer;min-height:44px;padding:0 4px;text-decoration:underline;text-underline-offset:3px}
.quiz__back[hidden]{display:none}
.quiz__done{animation:hero-rise .6s var(--ease-hero) both}
.quiz__done[hidden]{display:none}
.quiz__done h3{font:600 clamp(1.4rem,1.2rem + 1vw,2rem)/1.15 var(--font-d);margin:0 0 10px;letter-spacing:-.01em}
.quiz__done p{color:var(--ink-2);margin:0 0 18px}
.quiz__note{font-size:.78rem;color:var(--ink-2);margin-top:14px}

/* footer + compliance */
.foot{border-top:1px solid var(--line);padding:40px var(--sc-gutter) 80px;font-size:.84rem;color:var(--ink-2);line-height:1.6}
.foot p{margin:0 0 8px;max-width:72ch}
.foot a{color:var(--ink)}
.foot__links{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px}
.foot__links a{min-height:44px;display:inline-flex;align-items:center}

@media (prefers-reduced-motion:reduce){
  .enter-rise,.enter-fade,.eyebrow::before,.quiz__step,.quiz__done,[class*=settle]{animation:none!important}
  .btn{transition:none}
}

/* Lovable-sample motion grammar, in our skin: tracked labels, growing accent rules, chips, pinned rail */
.label{font:600 .72rem/1.2 var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.label::before{content:"";width:36px;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(var(--rule,1));transition:transform .6s var(--ease-hero) .1s}
[data-sc-in]:not(.sc-in) .label::before,.label[data-sc-in]:not(.sc-in)::before{--rule:0}
.chip{display:inline-flex;align-items:center;font:600 .66rem/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase;padding:6px 8px;border-radius:3px;
  border:1px solid color-mix(in oklab,var(--ink) 30%,transparent);color:var(--ink);background:color-mix(in oklab,var(--paper) 88%,transparent)}
.chip--accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* pinned horizontal rail. Desktop pins and pans; phones and reduced motion get a native swipe row (set by page script). */
.prail [data-sc-stage]{display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,32px);padding-top:var(--bar-h)}
.prail__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-inline:var(--sc-gutter)}
.prail__head h2{font:650 clamp(2rem,1.4rem + 2.6vw,3.6rem)/1 var(--font-d);letter-spacing:-.03em;margin:0}
.prail__track{display:flex;gap:clamp(14px,2vw,28px);padding-inline:var(--sc-gutter)}
.prail__bar{margin-inline:var(--sc-gutter);height:2px;background:var(--line);position:relative;overflow:hidden}
.prail__bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--sc-p,0))}
.prail--swipe{padding-block:clamp(3rem,8vw,5rem)}
.prail--swipe [data-sc-stage]{padding-top:0}
.prail--swipe .prail__track{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--sc-gutter);-webkit-overflow-scrolling:touch;padding-bottom:8px;scrollbar-width:thin}
.prail--swipe .prail__track>*{scroll-snap-align:start}
.prail--swipe .prail__bar{display:none}