/* Desk Pals landing page (/pals). Uses the site's theme variables, so light, dark and black all work. */

#palsApp{
    --pal-pink:#d6247c; --pal-cyan:#0a8fb8; --pal-yellow:#f0b100; --pal-green:#2f9e44;
    --pal-radius:16px;
}
:root[data-theme="dark"] #palsApp, :root[data-theme="black"] #palsApp{
    --pal-pink:#ff5fae; --pal-cyan:#4cd2ff; --pal-yellow:#ffd23f; --pal-green:#6fe08a;
}
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) #palsApp{
        --pal-pink:#ff5fae; --pal-cyan:#4cd2ff; --pal-yellow:#ffd23f; --pal-green:#6fe08a;
    }
}

#palsApp section{margin:64px 0;}
#palsApp h2{font-size:clamp(24px,4vw,32px); margin:0 0 6px;}
#palsApp h3{font-size:20px; margin:8px 0 4px;}

/* A bright stripe, a nod to 80s arcade cabinets, under the page title */
.pal-hero{padding:8px 0 4px;}
.pal-hero h1{display:inline-block; position:relative; padding-bottom:14px;}
.pal-hero h1::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:6px; border-radius:3px;
    background:linear-gradient(90deg,var(--pal-pink) 0 25%,var(--pal-yellow) 25% 50%,var(--pal-green) 50% 75%,var(--pal-cyan) 75% 100%);
}
.pal-hero .lede{margin:14px 0 22px;}
.pal-actions{display:flex; flex-wrap:wrap; gap:12px;}

.pal-sub{color:var(--ink-soft); max-width:62ch; margin:4px 0 16px;}
.pal-note{padding:12px 16px; border:2px dashed var(--line-strong); border-radius:12px; color:var(--ink-soft);}
.pal-asleep{margin-top:16px; padding:10px 14px; border-radius:12px; background:var(--copper-soft); color:var(--ink);}
.pal-asleep[hidden]{display:none;}

/* Buttons: big, chunky and easy to hit, for small hands too */
.pal-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    font:600 16px 'Public Sans', system-ui, sans-serif; padding:12px 22px; min-height:46px;
    border-radius:999px; border:2px solid var(--ink); background:var(--card); color:var(--ink);
    cursor:pointer; box-shadow:3px 3px 0 var(--ink); text-decoration:none;
    transition:transform .08s ease, box-shadow .08s ease;
}
.pal-btn:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); color:var(--ink);}
.pal-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);}
.pal-btn:focus-visible, .pal-switch input:focus-visible, .pal-slider input:focus-visible, .pal-faq summary:focus-visible, #palLink:focus-visible{
    outline:3px solid var(--pal-cyan); outline-offset:3px;
}
.pal-btn.primary{background:var(--terminal); color:var(--on-accent);}
.pal-btn.primary:hover{color:var(--on-accent);}
.pal-btn.small{padding:8px 16px; min-height:40px; font-size:15px;}
.pal-btn[aria-pressed="true"]{background:var(--pal-green); color:#08210f;}
.pal-btn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none; transform:none;}

/* Panels */
.pal-panel{
    background:var(--card); border:2px solid var(--ink); border-radius:var(--pal-radius);
    padding:24px; box-shadow:5px 5px 0 var(--ink);
}
.pal-controls{display:grid; gap:16px 28px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:center; margin:16px 0;}
.pal-switch{display:flex; gap:12px; align-items:flex-start; cursor:pointer; grid-column:1 / -1;}
.pal-switch input{width:22px; height:22px; margin-top:2px; accent-color:var(--terminal);}
.pal-switch small, .pal-share small{display:block; color:var(--ink-soft); font-weight:400;}
.pal-slider{display:grid; gap:6px; font-weight:600;}
.pal-slider input{width:100%; accent-color:var(--terminal);}
.pal-buttons{display:flex; gap:10px; flex-wrap:wrap;}

.pal-share{margin-top:12px; padding-top:16px; border-top:2px dashed var(--line-strong);}
.pal-share label{display:block; margin-bottom:8px;}
.pal-share-row{display:flex; gap:10px; flex-wrap:wrap;}
#palLink{
    flex:1 1 280px; min-width:0; padding:10px 14px; font:14px 'IBM Plex Mono', ui-monospace, monospace;
    border:2px solid var(--line-strong); border-radius:12px; background:var(--paper); color:var(--ink);
}
.pal-status{min-height:1.4em; margin:10px 0 0; color:var(--pal-green); font-weight:600;}

/* Pal cards */
.pal-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); margin-top:18px;}
.pal-grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.pal-card{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    background:var(--card); border:2px solid var(--ink); border-radius:var(--pal-radius);
    padding:18px 18px 20px; box-shadow:5px 5px 0 var(--ink);
}
.pal-card p{margin:6px 0; color:var(--ink-soft);}
.pal-card .pal-toggle{margin-top:auto;}
.pal-sprite{
    width:100%; display:grid; place-items:center; padding:12px 0; margin-bottom:6px; border-radius:12px;
    background:
        repeating-linear-gradient(0deg, transparent 0 11px, rgba(127,127,127,.12) 11px 12px),
        repeating-linear-gradient(90deg, transparent 0 11px, rgba(127,127,127,.12) 11px 12px),
        var(--copper-soft);
}
.pal-sprite img{width:calc(var(--w) * 1.6px); max-width:100%; height:auto; aspect-ratio:var(--w) / var(--h); image-rendering:pixelated;}
.pal-quotes{list-style:none; margin:6px 0 14px; padding:0; display:grid; gap:6px;}
.pal-quotes li{
    padding:6px 12px; border-radius:14px; border:2px solid var(--line-strong); background:var(--paper);
    font-weight:600; font-size:14px; line-height:1.35;
}
.pal-badge{
    display:inline-block; padding:2px 10px; border-radius:999px; font:600 12px 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing:.04em; border:2px solid var(--ink); color:#111;
}
.pal-badge.all{background:var(--pal-green);}
.pal-badge.teen{background:var(--pal-yellow);}
.pal-badge.soon{background:var(--pal-cyan);}

.pal-steps{padding-left:22px; display:grid; gap:12px; max-width:70ch;}
.pal-steps li::marker{font-weight:700; color:var(--terminal);}

.pal-code{position:relative; margin:12px 0;}
.pal-code pre{
    margin:0; padding:18px; overflow-x:auto; border-radius:12px; background:#1b140f; color:#ffe9c9;
    font:14px/1.55 'IBM Plex Mono', ui-monospace, monospace; border:2px solid var(--ink);
}
.pal-code .pal-btn{margin-top:10px;}
.pal-list{padding-left:20px; display:grid; gap:6px; max-width:70ch;}
.pal-list code, .pal-sub code, #palsApp p code{
    font:13.5px 'IBM Plex Mono', ui-monospace, monospace; padding:1px 6px; border-radius:6px; background:var(--paper-raised);
}

.pal-faq{display:grid; gap:10px; max-width:72ch;}
.pal-faq details{background:var(--card); border:2px solid var(--line-strong); border-radius:12px; padding:0 16px;}
.pal-faq summary{cursor:pointer; padding:14px 0; font-weight:600;}
.pal-faq details[open]{border-color:var(--ink);}
.pal-faq details p{margin:0 0 14px; color:var(--ink-soft);}

/* Phones */
@media (max-width:640px){
    #palsApp section{margin:48px 0;}
    .pal-panel{padding:18px;}
    .pal-btn{width:100%;}
    .pal-btn.small{width:auto;}
    .pal-actions .pal-btn{width:100%;}
}
@media (prefers-reduced-motion: reduce){
    .pal-btn{transition:none;}
    html{scroll-behavior:auto;}
}