/* Misfit Lab layer on top of the pepecarrillo.co v-next-2 tokens (/tokens.css).
   Adds: rainbow accent, four act colors, lab mode (ink background, paper text), shared buttons, forms and cards.
   Paper mode is the default. Lab mode is html[data-mode="lab"], set from sessionStorage or prefers-color-scheme.
   Act colors below pass AA (4.5:1) as text on paper and on paper-white. Lab tints pass on ink. */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  --rb1:#D63A7A;--rb2:#C98A12;--rb3:#4E9A33;--rb4:#12887C;--rb5:#6D4BD8;
  --rb:linear-gradient(90deg,var(--rb1),var(--rb2),var(--rb3),var(--rb4),var(--rb5));
  --rb-d:linear-gradient(135deg,var(--rb1),var(--rb2),var(--rb3),var(--rb4),var(--rb5));
  --act1:#B0245F;--act2:#8A5A00;--act3:#0B6B62;--act4:#5B3FC4;
  --link-ink:#B0245F;
  --gold-ink:#7A5600;
  --btn-bg:#B83A6B;--btn-hover:#A03060;
  --shadow:0 2px 10px rgba(27,21,18,0.10);
  --ok:#2F6B3A;--err:#B0245F;
  --ac:var(--act1);
  --ag:color-mix(in srgb,var(--ac) 12%,transparent);
  /* Aliases so older class names keep working on the program page */
  --text-secondary:var(--ink-secondary);--text-primary:var(--ink);--bg-alt:var(--paper-warm);
  --font-sans:var(--font-meta);--font-heading:var(--font-display);--font-accent:var(--font-hand);
  --accent:var(--pink-dark);--content-width:720px;
}
@media screen{
  html[data-mode="lab"]{
    color-scheme:dark;
    --paper:#1B1512;--paper-warm:#2A211C;--paper-white:#241C18;
    --ink:#F7F1E8;--ink-secondary:#CDBFB0;
    --border:rgba(247,241,232,0.16);--border-strong:rgba(247,241,232,0.32);
    --pink-dark:#FF8FB8;
    --rb1:#FF5C9E;--rb2:#FFB547;--rb3:#8BDB6A;--rb4:#3FD1C0;--rb5:#A98BFF;
    --act1:#FF7AB2;--act2:#E8B84A;--act3:#3FD1C0;--act4:#B79CFF;
    --link-ink:#FF8FB8;
    --gold-ink:#D4A039;
    --shadow:0 2px 14px rgba(0,0,0,0.45);
    --ok:#7FD08F;--err:#FF8FB8;
  }
}

.a1{--ac:var(--act1);--ag:color-mix(in srgb,var(--ac) 12%,transparent)}
.a2{--ac:var(--act2);--ag:color-mix(in srgb,var(--ac) 12%,transparent)}
.a3{--ac:var(--act3);--ag:color-mix(in srgb,var(--ac) 12%,transparent)}
.a4{--ac:var(--act4);--ag:color-mix(in srgb,var(--ac) 12%,transparent)}

body{overflow-x:clip}
.margin-note{color:var(--gold-ink)}
.site-footer .stamp{color:var(--gold-ink)}
.site-nav ul a.active{color:var(--link-ink)}
.site-nav .wordmark:hover{color:var(--link-ink)}
.section-label{font-family:var(--font-meta);font-size:var(--text-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--ac);margin:0 0 0.4rem}
.lede{color:var(--ink-secondary);font-size:var(--text-base)}
.misfit-bar{height:4px;width:84px;border-radius:4px;background:var(--rb)}

/* Lab mode toggle, sits in the site nav */
.mode-toggle{display:inline-flex;align-items:center;gap:0.5rem;min-height:44px;padding:0.2rem 0.85rem;border:1.5px solid var(--border-strong);border-radius:999px;background:transparent;color:var(--ink-secondary);font-family:var(--font-meta);font-size:var(--text-xs);letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}
.mode-toggle::before{content:"";width:0.8rem;height:0.8rem;border-radius:50%;border:2px solid currentColor;flex:0 0 auto}
.mode-toggle:hover{color:var(--ink);border-color:var(--ink-secondary)}
.mode-toggle[aria-pressed="true"]{color:var(--ink);border-color:var(--act1)}
.mode-toggle[aria-pressed="true"]::before{background:var(--act1);border-color:var(--act1)}
.mode-toggle:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:52px;padding:0.7rem 1.6rem;border-radius:999px;border:2px solid var(--btn-bg);background:var(--btn-bg);color:#fff;font-family:var(--font-display);font-style:italic;font-size:var(--text-base);line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:#fff;transform:scale(1.02);box-shadow:0 6px 20px rgba(184,58,107,0.3)}
.btn:active{transform:scale(0.98)}
.btn:focus-visible,.linkbtn:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible,.consent:focus-within,.copybtn:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.btn--ghost{background:transparent;color:var(--link-ink);border-color:var(--link-ink)}
.btn--ghost:hover{background:var(--ag);color:var(--link-ink);border-color:var(--link-ink);box-shadow:none}
.btn--sm{min-height:46px;padding:0.5rem 1.2rem;font-size:var(--text-sm)}
.btn--block{width:100%}
.btn--big{min-height:60px;font-size:var(--text-lg)}
.btn[aria-disabled="true"],.btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none}
.btn-row{display:flex;gap:var(--space-sm);flex-wrap:wrap;align-items:center}
.linkbtn{background:none;border:0;padding:0.5rem 0;min-height:44px;color:var(--link-ink);font:inherit;font-family:var(--font-meta);font-size:var(--text-sm);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Index-card surfaces */
.card{border:1px solid var(--border);border-left:3px dashed var(--pink);border-radius:3px;padding:var(--space-md);margin:var(--space-sm) 0;background:var(--paper-white);box-shadow:var(--shadow)}
.card--gold{border-left-color:var(--act2)}
.card p:last-child{margin-bottom:0}
.notice{background:var(--paper-warm);border-left:4px solid var(--act2);border-radius:3px;padding:var(--space-md);margin:var(--space-sm) 0}
.notice p:last-child{margin-bottom:0}

/* Form controls */
label.field{display:block;font-family:var(--font-meta);font-size:var(--text-sm);font-weight:500;margin:var(--space-sm) 0 0.4rem;line-height:1.4;color:var(--ink)}
input[type="text"],input[type="email"],select,textarea{width:100%;min-height:52px;padding:0.6rem 0.9rem;border:2px solid var(--border-strong);border-radius:6px;background:var(--paper-white);color:var(--ink);font-size:1rem;font-family:var(--font-meta);line-height:1.4}
textarea{min-height:8.5rem;resize:vertical;font-family:var(--font-body);line-height:1.6}
::placeholder{color:var(--ink-secondary);opacity:0.85}
.consent{display:flex;gap:0.9rem;align-items:flex-start;padding:var(--space-sm);border:2px solid var(--border-strong);border-radius:6px;margin:var(--space-sm) 0;cursor:pointer;min-height:52px;background:var(--paper-white)}
.consent input{width:26px;height:26px;flex:0 0 26px;margin-top:0.1rem;accent-color:var(--act1)}
.errtext{color:var(--err);font-family:var(--font-meta);font-size:var(--text-sm);font-weight:600;margin:0.4rem 0 0}
.counter{font-family:var(--font-meta);font-size:var(--text-xs);color:var(--ink-secondary);text-align:right;margin:0.2rem 0 0}
.meta-s{font-family:var(--font-meta);font-size:var(--text-sm);color:var(--ink-secondary);margin:0;text-transform:none;letter-spacing:0}

.rbar{height:12px;border-radius:12px;background:var(--rb);transform-origin:left center;animation:rbin 1s cubic-bezier(.2,.8,.2,1) both;margin:var(--space-sm) 0}
@keyframes rbin{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.btn,.mode-toggle{transition:none}.rbar{animation:none}}

@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff !important;color:#000 !important}
}