/* zippr, the prompt library. Built on the making-of page's styles (making.css: the tokens, header, footer, grids,
   cards, films and buttons); this file adds only what is new here: the opening, the style filter, the style label on
   each film, and the panel that shows a prompt in full (a panel on the right on wide screens, a sheet from the bottom
   on a phone), and a film's own page (the same prompt, written into the page). No inline styles in the markup. */

.lib [hidden],.pl-panel [hidden]{display:none !important;}

/* ---------- the opening: short, so the first card is in the first screen ---------- */
.lib-hero{padding-block:clamp(1rem,4vh,2.6rem) clamp(.6rem,2vh,1.4rem);}
.lib-hero h1{font-size:clamp(2.5rem,calc(1.45rem + 3.4vw),4.6rem);letter-spacing:-.045em;line-height:1.04;max-width:16ch;}
.lib-hero h1 span{margin-top:.05em;}
.lib-lead{margin-top:clamp(.8rem,2vh,1.2rem);max-width:44ch;font-size:var(--step-1);line-height:1.45;color:var(--ink);text-wrap:pretty;}

/* ---------- the style filter: a native picker on a phone, a row of chips that wraps on wider screens ---------- */
.pl-chips{display:none;}
.pl-pick{display:flex;flex-direction:column;gap:.4rem;margin-top:1.3rem;}
.pl-pick-label{font-size:var(--step--1);font-weight:700;color:var(--ink);}
.pl-pick select{-webkit-appearance:none;appearance:none;width:100%;min-height:52px;padding:0 3rem 0 1rem;border:0;border-radius:16px;
  background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1.1rem center/14px 9px no-repeat;
  box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);font:inherit;font-size:var(--step-0);font-weight:600;cursor:pointer;}
@media (min-width:640px){
  .pl-pick{display:none;}
  .pl-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:clamp(1.4rem,3.5vh,2.2rem);max-width:60rem;}
}
.pl-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1.05rem;border-radius:999px;background:var(--sheet);
  box-shadow:inset 0 0 0 1px var(--tile-line);color:var(--ink);font-size:var(--step--1);font-weight:700;white-space:nowrap;
  transition:background .2s,color .2s,box-shadow .2s;}
.pl-chip .pl-n{font-weight:600;color:var(--muted-own);font-variant-numeric:tabular-nums;}
.pl-chip:hover{box-shadow:inset 0 0 0 1.5px var(--ink);}
.pl-chip[aria-pressed="true"]{background:var(--ink);color:#FFFFFF;box-shadow:none;}
.pl-chip[aria-pressed="true"] .pl-n{color:#C4CBD6;}

/* ---------- the two groups: one headline size down the page, the count beside it ---------- */
.lib-group{padding-block:clamp(1.6rem,5vh,3.5rem);}
.lib-group h2{font-size:clamp(2.2rem,calc(1.3rem + 3.2vw),4.4rem);letter-spacing:-.045em;line-height:1.04;}
.lib-group h2 .pl-n{display:inline;margin-left:.4rem;font-family:var(--body);font-size:var(--step-1);font-weight:600;letter-spacing:0;
  color:var(--muted);font-variant-numeric:tabular-nums;}
.lib-group .grid{margin-top:clamp(1rem,2.5vh,1.6rem);}

/* the style, on the film itself: a white label at its top left (the sound button sits top right) */
.pl-kind{position:absolute;z-index:1;left:.55rem;top:.55rem;display:inline-flex;align-items:center;min-height:30px;padding:0 .75rem;
  border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);font-size:var(--step--1);font-weight:700;line-height:1;
  pointer-events:none;box-shadow:0 6px 16px -8px rgba(var(--shadow-rgb),.55);}
/* the one wide film is shown on a phone here too, the full width of the column */
@media (max-width:639px){
  .lib .film.is-land{display:flex;}
  .lib .film.is-land .film-media{width:100%;}
}
.lib .card .title{margin-top:.75rem;}

/* ---------- footer: one line and the way to the breakdowns ---------- */
.foot-line a{margin-left:.35rem;color:var(--link);font-weight:600;text-underline-offset:3px;}

/* ---------- the panel: the prompt in full ---------- */
html.pl-lock{overflow:hidden;}
.pl-panel{position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0;width:min(640px,100%);max-width:none;height:100%;max-height:none;
  background:transparent;color:var(--ink);overflow:visible;}
.pl-panel::backdrop{background:rgba(17,24,39,.5);}
.pl-sheet{display:flex;flex-direction:column;height:100%;background:var(--sheet);box-shadow:-24px 0 60px -30px rgba(var(--shadow-rgb),.7);}
.pl-top{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem 1.4rem .5rem 1.75rem;}
.pl-name{flex:1;min-width:0;}
.pl-what{font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);}
.pl-title{margin-top:.3rem;font-family:var(--display);font-weight:700;font-size:var(--step-2);line-height:1.2;letter-spacing:-.015em;text-wrap:balance;}
.pl-close{flex:none;position:relative;width:44px;height:44px;border-radius:50%;background:var(--card);transition:box-shadow .2s;}
.pl-close::before,.pl-close::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;border-radius:2px;
  background:var(--ink);transform:rotate(45deg);}
.pl-close::after{transform:rotate(-45deg);}
.pl-close:hover{box-shadow:inset 0 0 0 1.5px var(--ink);}
.pl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;padding:.6rem 1.75rem 1.1rem;border-bottom:1px solid var(--line);}
.pl-acts .copy[disabled]{opacity:.55;cursor:default;}
.pl-said{min-width:0;font-size:var(--step--1);font-weight:600;line-height:1.35;color:var(--ink);}
.pl-said:empty{display:none;}
.pl-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:1.25rem 1.75rem 2.5rem;}
.pl-lead{max-width:60ch;font-size:var(--step-0);line-height:1.55;color:var(--ink);text-wrap:pretty;}
.pl-lead:empty{display:none;}
.pl-text{margin-top:1rem;max-width:65ch;padding:1.15rem 1.3rem 1.3rem;border-radius:16px;background:var(--card);
  box-shadow:inset 0 0 0 1px var(--card-line);}
.pl-text:empty{display:none;}
.pl-h{margin-top:1.5rem;font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:.08em;line-height:1.35;color:var(--accent);}
.pl-h:first-child{margin-top:0;}
.pl-p{margin-top:.65rem;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--step-0);line-height:1.6;}
.pl-p:first-child{margin-top:0;}
.pl-how{margin-top:1.5rem;}

/* on a phone: a sheet from the bottom, as tall as its content up to most of the screen */
@media (max-width:639px){
  .pl-panel{inset:auto 0 0 0;width:100%;height:auto;max-height:92svh;}
  .pl-sheet{height:auto;max-height:92svh;border-radius:24px 24px 0 0;box-shadow:0 -24px 60px -30px rgba(var(--shadow-rgb),.7);}
  .pl-top{padding:1.2rem 1rem .4rem 1.25rem;}
  .pl-acts{padding:.4rem 1.25rem 1rem;}
  .pl-body{padding:1rem 1.25rem 2.25rem;}
  .pl-text{padding:1rem 1rem 1.15rem;}
}
@media (prefers-reduced-motion:no-preference){
  .pl-panel[open] .pl-sheet{animation:pl-in .32s var(--ease);}
  .pl-panel[open]::backdrop{animation:pl-fade .32s ease;}
}
@media (prefers-reduced-motion:no-preference) and (max-width:639px){
  .pl-panel[open] .pl-sheet{animation-name:pl-up;}
}
@keyframes pl-in{from{transform:translateX(48px);opacity:0;}}
@keyframes pl-up{from{transform:translateY(64px);opacity:0;}}
@keyframes pl-fade{from{opacity:0;}}

/* ---------- a film's own page (/prompts/<film>/): the panel's prompt as a page of its own, written into the HTML, so
   it reads and links without any script. One reading column; the prompt laid out as in the panel. ---------- */
.fp .shell{max-width:calc(42rem + 2 * var(--gutter));}
/* a link drawn as a quiet link (.how) keeps its one line, the border, not the browser's underline as well */
.lib a.how{text-decoration:none;}
.fp-back{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;margin-bottom:.4rem;font-size:var(--step-0);font-weight:600;
  color:var(--link);}
.fp-back::before{content:"";flex:none;width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);}
.fp-back:hover{text-decoration:underline;text-underline-offset:4px;}
.fp-hero .kicker{display:flex;}
.fp-acts{margin-top:clamp(1rem,2.5vh,1.5rem);}
.fp-prompt{padding-block:clamp(1rem,3vh,2rem) clamp(2.5rem,7vh,4.5rem);}
.fp-prompt .pl-text{max-width:none;}
/* the prompt's own spaces and indents kept, and a space where a line wraps kept inside the line, not hanging past it */
.fp-prompt .pl-p{white-space:break-spaces;}
.fp-prompt .fp-acts{margin-top:1.5rem;}