/* Status Pages (Confirmation & Error) - The Funky Monkeys GROOVE */
:root {
--color-paper:oklch(98% .012 77);--color-panel:oklch(94% .025 60);--color-ink:oklch(19% .009 35);--color-muted:oklch(43% .012 35);--color-accent:oklch(68.8% .185 20);--color-accent-ink:oklch(17.6% .006 20);--color-gold:oklch(92.4% .101 95);--color-cream:oklch(98% .012 77);--color-dark:oklch(19% .009 35);--color-rule:oklch(79% .02 60);--color-transparent:transparent;--color-shade:oklch(17.6% .006 20 / .85);--color-shadow:oklch(17.6% .006 20 / .18);--color-focus:var(--color-ink);
--font-display:'Outfit',sans-serif;--font-body:var(--font-display);
--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;
--dur-micro:150ms;--radius-control:100px;--page-gutter:clamp(1.25rem,4vw,4rem);
--color-success:oklch(55% .15 140);--color-success-bg:oklch(92% .08 140);
--color-error:oklch(50% .18 25);--color-error-bg:oklch(92% .08 25);
}

@font-face{font-family:Outfit;src:url('/fonts/outfit-variable.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html{background:var(--color-paper);color:var(--color-ink);font-family:Outfit,sans-serif}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;overflow-x:clip}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible{outline:3px solid var(--color-ink);outline-offset:5px}
.wrap{width:min(calc(100% - var(--page-gutter)*2),1440px);margin-inline:auto}
.status-skip{position:absolute;left:20px;top:-100px;background:var(--color-gold);padding:1rem;z-index:2}
.status-skip:focus{top:12px}
.status-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.5rem}
.status-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-size:.9rem;font-weight:800;line-height:1.05}
.status-brand img{display:block;width:40px;height:40px}
.status-language{display:flex;gap:.25rem}
.status-language a{display:grid;place-items:center;min-width:44px;min-height:44px;border-bottom:2px solid transparent;text-decoration:none;font-size:.8rem;font-weight:650}
.status-language a[aria-current=page]{border-color:var(--color-accent)}

.status-main{flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding-block:3rem 5rem}
.status-visual{position:relative;isolation:isolate;padding-block:1rem 3rem}
.status-visual:before{content:'';position:absolute;inset:20% 0 15%;background:var(--color-gold);transform:rotate(-4deg);z-index:-1}
.status-visual:after{content:'';position:absolute;inset:15% -1% 18%;border:3px solid var(--color-accent);transform:rotate(2.5deg);z-index:-1}
.status-icon{font-size:clamp(8rem,18vw,16rem);font-weight:850;line-height:.9;letter-spacing:-.05em;margin:0}
.is-confirmed .status-icon{color:var(--color-success)}
.is-error .status-icon{color:var(--color-error)}
.status-sticker{display:inline-block;padding:.625rem 1rem;margin:1rem 0 0 1rem;background:var(--color-dark);color:var(--color-cream);font-size:.8rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-3deg)}
.status-sticker.is-success{background:var(--color-success);color:#fff}
.status-sticker.is-error{background:var(--color-error);color:#fff}

.status-copy h1{font-size:clamp(2.3rem,4.5vw,4.2rem);font-weight:800;line-height:1.05;letter-spacing:-.045em;margin:0 0 1.25rem}
.status-copy h1 span{color:var(--color-accent)}
.status-lead{font-size:1.15rem;line-height:1.6;font-weight:600;margin-bottom:1rem;color:var(--color-ink)}
.status-text{font-size:1rem;line-height:1.65;color:var(--color-muted);margin:0 0 1.5rem;max-width:52ch}
.status-box{background:var(--color-panel);padding:1.25rem 1.5rem;border-left:4px solid var(--color-accent);margin-block:1.5rem;border-radius:2px}
.status-box h3{font-size:1.05rem;font-weight:750;margin:0 0 .5rem}
.status-box ul{margin:0;padding-left:1.25rem;font-size:.9rem;line-height:1.6;color:var(--color-muted)}
.status-box li{margin-bottom:.35rem}

.status-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
.status-actions a{display:inline-flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:52px;padding:1rem 1.35rem;border-radius:var(--radius-control);text-decoration:none;font-size:.95rem;font-weight:650;transition:transform var(--dur-micro) ease}
.status-actions a:hover{transform:translateY(-2px)}
.status-primary{background:var(--color-accent);color:var(--color-accent-ink);border:1px solid var(--color-accent)}
.status-secondary{border:1px solid var(--color-rule);background:var(--color-transparent)}
.status-actions a:hover{background:var(--color-dark);color:var(--color-cream);border-color:var(--color-dark)}

.status-footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.5rem;border-top:1px solid var(--color-rule);font-size:.8rem;line-height:1.5;color:var(--color-muted)}
.status-footer a:hover{text-decoration:underline}

@media(max-width:760px){
 .status-header{padding-block:1.25rem}
 .status-main{grid-template-columns:minmax(0,1fr);gap:2rem;padding-block:1.5rem 3rem}
 .status-visual{width:min(100%,380px);margin-inline:auto;padding-block:0 1rem;text-align:center}
 .status-copy h1{font-size:clamp(2rem,8.5vw,3rem)}
 .status-actions{margin-top:1.5rem}
 .status-actions a{font-size:.85rem;gap:1rem;padding:.875rem 1rem}
}