/* «قصاصات» episode prompt pages (/prompts/<slug>/): the clipping, the typed prompt slip, the note scrap.
   Loaded after the homepage style.css, which brings the desk, paper, tape, cut-outs, header and footer. */
.pr{padding-bottom:8px}
.pr-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:clamp(6px,1.2vw,14px) 0 clamp(14px,2vw,24px);font-size:.9375rem;font-weight:700;color:var(--muted)}
.pr-crumb a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px;color:var(--paper);text-decoration:underline;
 text-decoration-color:rgba(46,196,182,.7);text-decoration-thickness:2px;text-underline-offset:7px;transition:color .2s ease}
.pr-sep{width:16px;height:16px;flex:none;color:var(--teal)}
.pr-head .mast{flex-wrap:wrap}
.pr-kk{font-size:.875rem;font-weight:800;color:var(--ai)}
.pr-h1{margin:0;max-width:24ch;font-size:clamp(2rem,4.4vw,3.9rem);font-weight:800;line-height:1.22;color:var(--pi)}
.pr-intro{display:grid;gap:10px;margin-top:clamp(14px,1.8vw,22px);max-width:64ch}
.pr-intro p{margin:0;font-size:clamp(1.0625rem,1.45vw,1.3125rem);font-weight:500;line-height:1.8;color:var(--pi)}
.ltr{font:inherit;font-weight:700;letter-spacing:.02em;font-variant-ligatures:none;direction:ltr;unicode-bidi:isolate;white-space:nowrap;padding:.02em .38em;border-radius:4px;
 background:rgba(46,196,182,.16);box-shadow:inset 0 0 0 1px rgba(46,196,182,.4)}
.paper .ltr{background:rgba(15,26,31,.07);box-shadow:inset 0 0 0 1px rgba(15,26,31,.22)}
.pr-ep{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:18px}
.pr-ep-k{margin:0;font-weight:800;color:var(--pi)}
.pr-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:clamp(30px,3.8vw,60px);align-items:start;margin-top:clamp(40px,4.6vw,64px)}
.pr-label{margin:0 0 22px;max-width:60ch;color:var(--paper);font-size:clamp(1.0625rem,1.3vw,1.1875rem);font-weight:700;line-height:1.75}

/* the prompt: a typed slip on ruled paper with a turquoise margin; plain selectable text */
.pr-slip .tape{left:auto;right:clamp(28px,10%,120px);margin-left:0;transform:rotate(3.5deg)}
.pr-sheet{padding:clamp(28px,2.6vw,32px) clamp(18px,2.6vw,34px) clamp(26px,2.8vw,36px)}
.pr-bar{display:flex;justify-content:flex-end;margin-bottom:clamp(12px,1.4vw,16px)}
.pr-bar[hidden]{display:none}
.pr-pre{position:relative;margin:0;padding-inline-start:clamp(14px,1.8vw,22px);border-inline-start:2.5px solid rgba(10,106,98,.75);
 white-space:pre-wrap;overflow-wrap:break-word;tab-size:4;direction:rtl;text-align:start;-webkit-user-select:text;user-select:text;
 font:500 clamp(1.0625rem,1.3vw,1.21875rem)/2.15 Tajawal,system-ui,sans-serif;color:var(--pi);
 background:repeating-linear-gradient(to bottom,transparent 0 calc(2.15em - 1.5px),rgba(15,26,31,.16) calc(2.15em - 1.5px) 2.15em)}
.pr-pre code{font:inherit;color:inherit;white-space:inherit}
.pr-pre ::selection,.pr-pre::selection{background:rgba(46,196,182,.45);color:var(--pi)}

/* «انسخ البرومبت»: a turquoise tag; on success it reads «اننسخ» with a tick and the slip gets one marker sweep */
.pr-copy{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:0;border-radius:6px;cursor:pointer;
 font:800 1.0625rem/1 Tajawal,system-ui,sans-serif;color:#0B1418;background-color:var(--teal);transform:rotate(-1deg);
 filter:drop-shadow(-3px 6px 6px rgba(0,0,0,.32));transition:transform .3s var(--ease-out),filter .3s var(--ease-out),background-color .2s ease,color .2s ease}
.pr-copy .ico{width:22px;height:22px}
.pr-copy .pr-i-ok{display:none}
.pr-copy.ok{background-color:var(--pi);color:var(--teal)}
.pr-copy.ok .pr-i-ok{display:block}.pr-copy.ok .pr-i-copy{display:none}
.pr-copy:active{transform:rotate(-1deg) scale(.96)}
.paper .pr-copy:focus-visible{outline:3px solid var(--ai);outline-offset:4px}
.pr-wash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
 background:linear-gradient(to left,transparent,rgba(46,196,182,.30) 30%,rgba(46,196,182,.30) 70%,transparent) no-repeat 100% 0/0% 100%}
@keyframes pr-wash{0%{opacity:1;background-size:0% 100%}55%{opacity:1;background-size:100% 100%}100%{opacity:0;background-size:100% 100%}}
@keyframes pr-thump{0%{transform:rotate(-1deg) scale(1)}40%{transform:rotate(-2.5deg) scale(1.07)}70%{transform:rotate(-.4deg) scale(.98)}100%{transform:rotate(-1deg) scale(1)}}

/* the note: a grey scrap with a black cut-out «تنبيه:» */
.pr-note{position:relative}
.pr-note .tape{left:18%;margin-left:0;transform:rotate(-5deg)}
.pr-note-p{background-color:var(--grey);padding:clamp(24px,2.4vw,30px) clamp(18px,2.2vw,26px) clamp(24px,2.4vw,30px)}
.pr-note-p p{margin:0;font-size:clamp(1rem,1.1vw,1.0625rem);font-weight:500;line-height:1.85;color:var(--pi)}
.pr-nk{display:inline-block;margin-inline-end:8px;transform:rotate(-2deg);filter:drop-shadow(-2px 3px 2px rgba(0,0,0,.3))}
.pr-nk .sc-in{display:inline-block;background-color:var(--card-k);color:var(--paper);font-weight:800;padding:.24em .55em .32em}
.pr-back{margin:clamp(40px,5vw,64px) 0 0}
.pr-back .more-go{display:inline-block}

@media (hover:hover) and (pointer:fine){
 .pr-crumb a:hover{color:var(--teal-2)}
 .pr-copy:hover{transform:rotate(-1deg) translateY(-2px);filter:drop-shadow(-6px 12px 12px rgba(0,0,0,.4));background-color:var(--teal-2)}
 .pr-copy.ok:hover{background-color:var(--pi)}
 .more:hover .more-go{transform:translateX(5px)}
}
@media (prefers-reduced-motion:no-preference){
 .pr-slip{animation:drop .95s var(--flut) 260ms backwards}
 .pr-note{animation:drop .95s var(--flut) 420ms backwards}
 .pr-sheet.flash .pr-wash{animation:pr-wash .75s cubic-bezier(.55,.05,.3,1)}
 .pr-copy.ok{animation:pr-thump .42s cubic-bezier(.5,0,.25,1)}
}
@media (max-width:900px){
 .pr-grid{grid-template-columns:minmax(0,1fr)}
 .pr-note{max-width:640px}
}
@media (max-width:620px){
 .pr-head{--r:-.3deg!important}
 .pr-slip,.pr-note{--r:0deg!important}
 .pr-h1{font-size:clamp(1.75rem,8vw,2.25rem);line-height:1.28}
 .pr-intro p{font-size:1.0625rem;line-height:1.75}
 .pr-sheet{padding:28px 14px 24px}
 .pr-bar{margin-bottom:12px}
 .pr-copy{width:100%}
 .pr-pre{font-size:1.0625rem;padding-inline-start:12px}
}
@media (max-width:380px){.ltr{white-space:normal;overflow-wrap:anywhere}}
@media (prefers-reduced-motion:reduce){.pr-copy,.pr-crumb a{transition:none}}
.tn-pr{clip-path:polygon(0.00% 3.2px,1.79% 0.8px,3.57% 3.5px,5.36% 0.6px,7.14% 3.7px,8.93% 0.7px,10.71% 2.4px,12.50% 0.7px,14.29% 2.3px,16.07% 0.2px,17.86% 3.0px,19.64% 1.7px,21.43% 3.6px,23.21% 1.0px,25.00% 4.8px,26.79% 1.6px,28.57% 3.8px,30.36% 0.4px,32.14% 3.7px,33.93% 0.6px,35.71% 4.9px,37.50% 0.1px,39.29% 3.3px,41.07% 1.2px,42.86% 3.9px,44.64% 1.0px,46.43% 4.3px,48.21% 0.4px,50.00% 4.6px,51.79% 1.6px,53.57% 2.3px,55.36% 0.6px,57.14% 3.2px,58.93% 0.7px,60.71% 3.7px,62.50% 0.4px,64.29% 4.0px,66.07% 1.5px,67.86% 4.8px,69.64% 1.5px,71.43% 2.9px,73.21% 1.3px,75.00% 4.4px,76.79% 1.1px,78.57% 4.1px,80.36% 0.5px,82.14% 4.4px,83.93% 0.4px,85.71% 3.8px,87.50% 0.5px,89.29% 3.7px,91.07% 0.1px,92.86% 3.1px,94.64% 1.4px,96.43% 3.0px,98.21% 1.3px,100.00% 4.4px,100.00% calc(100% - 7.1px),98.21% calc(100% - 0.7px),96.43% calc(100% - 8.8px),94.64% calc(100% - 1.8px),92.86% calc(100% - 8.9px),91.07% calc(100% - 4.6px),89.29% calc(100% - 8.1px),87.50% calc(100% - 2.5px),85.71% calc(100% - 10.6px),83.93% calc(100% - 2.0px),82.14% calc(100% - 7.4px),80.36% calc(100% - 2.2px),78.57% calc(100% - 7.6px),76.79% calc(100% - 1.1px),75.00% calc(100% - 8.8px),73.21% calc(100% - 0.6px),71.43% calc(100% - 4.7px),69.64% calc(100% - 2.5px),67.86% calc(100% - 6.0px),66.07% calc(100% - 0.0px),64.29% calc(100% - 6.0px),62.50% calc(100% - 0.6px),60.71% calc(100% - 6.5px),58.93% calc(100% - 2.6px),57.14% calc(100% - 8.5px),55.36% calc(100% - 2.6px),53.57% calc(100% - 5.7px),51.79% calc(100% - 2.8px),50.00% calc(100% - 4.4px),48.21% calc(100% - 2.9px),46.43% calc(100% - 5.2px),44.64% calc(100% - 1.7px),42.86% calc(100% - 7.8px),41.07% calc(100% - 5.6px),39.29% calc(100% - 6.8px),37.50% calc(100% - 1.3px),35.71% calc(100% - 5.5px),33.93% calc(100% - 1.5px),32.14% calc(100% - 11.3px),30.36% calc(100% - 2.5px),28.57% calc(100% - 6.2px),26.79% calc(100% - 5.5px),25.00% calc(100% - 7.9px),23.21% calc(100% - 0.4px),21.43% calc(100% - 8.0px),19.64% calc(100% - 2.5px),17.86% calc(100% - 6.3px),16.07% calc(100% - 1.7px),14.29% calc(100% - 8.6px),12.50% calc(100% - 0.6px),10.71% calc(100% - 4.3px),8.93% calc(100% - 4.6px),7.14% calc(100% - 8.4px),5.36% calc(100% - 1.9px),3.57% calc(100% - 8.0px),1.79% calc(100% - 1.3px),0.00% calc(100% - 8.5px))}