/* zippr task pop-up. One task opens one pop-up: a smaller video, then three grouped topics you can
   open: how we made it, do it yourself today, how zippr would optimise this. Drops into any zippr page as is.
   Colours and faces follow the page's own tokens when it has them and fall back to
   blue on warm cream. No @font-face here: the host page loads its faces.
   No backdrop-filter, no blend modes; motion only on transform, opacity, colour and height, and none under
   reduced motion. */

html.zp-lock{overflow:hidden;}

.zp-pop{
  --zp-ground:var(--ground,#F7F2EA);
  --zp-sheet:var(--sheet,#FFFFFF);
  --zp-ink:var(--ink,#16213A);
  --zp-muted:var(--muted,#55607A);
  --zp-accent:var(--accent,#E0691C);
  --zp-focus:var(--focus,#2F5FB3);
  --zp-link:var(--link,#2F5FB3);
  --zp-pill-bg:var(--pill-bg,#16213A);
  --zp-pill-ink:var(--pill-ink,#FFFFFF);
  --zp-pill-hover:var(--pill-hover,#26345A);
  --zp-code:var(--code,#3F6FC2);
  --zp-code-ink:var(--on-code,#FFFFFF);
  --zp-ai-bg:var(--ai-bg,#FFE7D1);
  --zp-ai-ink:var(--ai-ink,#8F3F0C);
  --zp-free-bg:var(--free-bg,#EDE7DD);
  --zp-night:#0C1322;
  --zp-line:rgba(var(--ink-rgb,22,33,58),.12);
  --zp-line-strong:rgba(var(--ink-rgb,22,33,58),.4);
  --zp-display:var(--display,"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif);
  --zp-body:var(--body,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  --zp-ease:cubic-bezier(.22,1,.36,1);
  --zp-aspect:9/16;

  position:fixed;inset:0;margin:auto;
  width:min(1120px,calc(100vw - 4rem));height:min(860px,calc(100dvh - 4rem));
  max-width:none;max-height:none;padding:0;border:0;border-radius:22px;overflow:hidden;
  background:var(--zp-sheet);color:var(--zp-ink);
  font-family:var(--zp-body);font-size:17px;line-height:1.55;text-align:left;
  -webkit-font-smoothing:antialiased;
  box-shadow:0 40px 90px -40px rgba(12,19,34,.6);
}
.zp-pop:not([open]){display:none;}
.zp-pop::backdrop{background:rgba(12,19,34,.74);}
.zp-pop *,.zp-pop *::before,.zp-pop *::after{box-sizing:border-box;}
.zp-pop :where(h2,h3,h4,p,ul,ol,li,figure,blockquote){margin:0;padding:0;}
.zp-pop :where(button){font:inherit;color:inherit;}
.zp-pop :focus-visible{outline:2px solid var(--zp-focus);outline-offset:3px;}

.zp-box{position:relative;display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);height:100%;}

/* ---------- the video, smaller: 40% on a desktop ---------- */
.zp-media{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size;
  padding:clamp(16px,2.2vw,28px);background:var(--zp-ground);}
/* the frame keeps the media's own shape and fits the column either way (--zp-ar is width / height) */
.zp-frame{position:relative;flex:none;width:min(100cqw,100cqh * var(--zp-ar,.5625));height:auto;aspect-ratio:var(--zp-aspect);
  border-radius:14px;overflow:hidden;background:var(--zp-night);}
.zp-frame video,.zp-frame img{display:block;width:100%;height:100%;object-fit:contain;background:var(--zp-night);}
.zp-frame [hidden]{display:none;}
.zp-frame video{cursor:pointer;}
.zp-frame.is-still{background:var(--zp-sheet);box-shadow:0 0 0 1px var(--zp-line-strong),0 22px 44px -26px rgba(12,19,34,.55);}
.zp-frame.is-still img{object-fit:cover;background:var(--zp-sheet);}

.zp-play{position:absolute;left:50%;top:50%;z-index:3;width:64px;height:64px;margin:-32px 0 0 -32px;border:0;border-radius:50%;
  display:none;place-items:center;cursor:pointer;background:var(--zp-sheet);color:var(--zp-ink);
  box-shadow:0 10px 30px -10px rgba(12,19,34,.6);}
.zp-play::before{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 17px;
  border-color:transparent transparent transparent currentColor;}
.zp-frame.is-paused .zp-play{display:grid;}
.zp-frame.is-still .zp-play,.zp-frame.is-still .zp-sound{display:none;}

.zp-sound{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:0 .95rem 0 .75rem;border:0;border-radius:999px;cursor:pointer;background:rgba(12,19,34,.78);color:#FFFFFF;
  font-size:15px;font-weight:600;line-height:1;}
.zp-sound-icon{position:relative;width:18px;height:14px;flex:none;}
.zp-sound-icon::before{content:"";position:absolute;left:0;top:4px;width:5px;height:6px;background:currentColor;border-radius:1px;}
.zp-sound-icon::after{content:"";position:absolute;left:3px;top:0;border-style:solid;border-width:7px 7px 7px 0;
  border-color:transparent currentColor transparent transparent;}
.zp-sound[aria-pressed="false"] .zp-sound-icon{background:linear-gradient(45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%) 10px 2px/9px 10px no-repeat;}
.zp-sound[aria-pressed="true"] .zp-sound-icon{background:radial-gradient(circle at 0 50%,transparent 5px,currentColor 5px,currentColor 6.5px,transparent 6.5px) 11px 1px/8px 12px no-repeat;}

.zp-grow{display:none;}

.zp-close{position:absolute;right:14px;top:14px;z-index:5;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:var(--zp-pill-bg);color:var(--zp-pill-ink);transition:background .2s;}
.zp-close::before,.zp-close::after{content:"";grid-area:1/1;width:16px;height:2px;border-radius:1px;background:currentColor;transform:rotate(45deg);}
.zp-close::after{transform:rotate(-45deg);}
.zp-close:hover{background:var(--zp-pill-hover);}

/* ---------- the words: title, then three topics ---------- */
.zp-side{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(28px,3.4vw,44px) clamp(24px,4vw,56px) 48px clamp(24px,3vw,40px);}
.zp-side:focus{outline:none;}
/* type: nothing under 14 px, weights 400 / 600 / 700 only; chips, badges, step numbers and the group line are the
   15 px label step, the outcome and the optimise summary the lead step */
.zp-group{padding-right:3rem;font-size:15px;font-weight:600;color:var(--zp-muted);}
.zp-title{margin-top:.3rem;padding-right:3rem;font-family:var(--zp-display);font-weight:600;font-size:clamp(26px,calc(23.9px + .5vw),32px);
  line-height:1.1;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere;}
.zp-link{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin-top:.6rem;padding:0 1.1rem;border-radius:999px;
  border:1px solid var(--zp-line-strong);color:var(--zp-ink);font-size:15px;font-weight:600;text-decoration:none;transition:border-color .2s,background .2s;}
.zp-link::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);}
.zp-link:hover{border-color:var(--zp-ink);background:var(--zp-ground);}
.zp-link[hidden]{display:none;}

.zp-topics{margin-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--zp-line);}
.zp-topic{border-bottom:1px solid var(--zp-line);}
.zp-topic > summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;column-gap:.75rem;
  min-height:64px;padding:.85rem 0;cursor:pointer;}
.zp-topic > summary::-webkit-details-marker{display:none;}
.zp-topic-title{grid-column:1;font-family:var(--zp-display);font-weight:600;font-size:clamp(19.5px,calc(18.8px + .2vw),21.6px);
  line-height:1.25;letter-spacing:-.01em;}
.zp-topic-hint{grid-column:1;margin-top:.15rem;font-size:15px;line-height:1.4;color:var(--zp-muted);}
.zp-topic[open] .zp-topic-hint{display:none;}
.zp-chev{grid-column:2;grid-row:1/span 2;justify-self:end;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--zp-ground);transition:background .2s;}
.zp-chev::before{content:"";width:9px;height:9px;margin-top:-4px;border-right:2px solid var(--zp-ink);border-bottom:2px solid var(--zp-ink);
  transform:rotate(45deg);transition:transform .3s var(--zp-ease);}
.zp-topic[open] > summary .zp-chev::before{transform:rotate(-135deg);margin-top:4px;}
.zp-topic > summary:hover .zp-chev{background:var(--zp-free-bg);}
.zp-topic-body{padding:0 0 1.5rem;}

/* how we made it */
.zp-made{list-style:none;display:grid;gap:.75rem;}
.zp-made li{position:relative;padding-left:1.35rem;}
.zp-made li::before{content:"";position:absolute;left:.1rem;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--zp-accent);}
.zp-outcome{margin-top:1.1rem;padding:1rem 1.15rem;border-radius:14px;background:var(--zp-ground);}
.zp-outcome .zp-said p{font-weight:400;font-size:clamp(19.5px,calc(18.8px + .2vw),21.6px);line-height:1.45;text-wrap:pretty;}
.zp-outcome figcaption{margin-top:.45rem;font-size:15px;color:var(--zp-muted);}
.zp-outcome a{color:var(--zp-link);font-weight:600;text-underline-offset:3px;}

/* do it yourself today */
.zp-tip{color:var(--zp-ink);}
.zp-prompt{margin-top:1rem;padding:1.05rem 1.15rem 1.15rem;border-radius:14px;background:var(--zp-ground);}
.zp-prompt-label{font-size:15px;font-weight:600;color:var(--zp-muted);}
/* the one plain line above a long prompt: what to do with it */
.zp-prompt-lead{font-size:17px;font-weight:400;line-height:1.5;color:var(--zp-ink);text-wrap:pretty;}
.zp-prompt-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.8rem;}
/* the prompt keeps its line breaks; a long one reads in its own box, which hands the scroll back to the pop-up at
   its ends (no trap), so the button above it is never a thousand words away */
.zp-prompt-text{margin-top:.9rem;font-size:17px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap;}
.zp-prompt-long .zp-prompt-text{max-height:min(28em,52vh);max-height:min(28em,52dvh);overflow:auto;padding:.85rem 1rem;
  border-radius:10px;background:var(--zp-sheet);box-shadow:inset 0 0 0 1px var(--zp-line);font-size:17px;line-height:1.55;}
.zp-online{margin-top:1.3rem;}
.zp-online p{margin-top:.35rem;}
.zp-copy{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1.2rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--zp-pill-bg);color:var(--zp-pill-ink);font-size:15px;font-weight:600;transition:background .2s;}
.zp-copy:hover{background:var(--zp-pill-hover);}
.zp-copy.is-done::before{content:"";width:5px;height:10px;margin:-3px .1rem 0 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);}
.zp-copied{font-size:15px;color:var(--zp-muted);}
.zp-sub{margin-top:1.4rem;font-family:var(--zp-display);font-weight:600;font-size:17px;letter-spacing:-.005em;}
.zp-tools{list-style:none;margin-top:.4rem;border-top:1px solid var(--zp-line);}
.zp-tool{border-bottom:1px solid var(--zp-line);}
.zp-tool > summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 36px;column-gap:.6rem;align-items:start;
  padding:.8rem 0;cursor:pointer;}
.zp-tool > summary::-webkit-details-marker{display:none;}
.zp-tool-main{display:block;min-width:0;}
.zp-tool-head{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .55rem;}
.zp-offscreen{position:fixed;left:-9999px;top:0;opacity:0;}
.zp-tool-name{font-weight:600;overflow-wrap:anywhere;}
.zp-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 .65rem;border-radius:999px;font-size:15px;font-weight:600;line-height:1;}
.zp-badge-free{background:var(--zp-free-bg);color:var(--zp-ink);}
.zp-badge-paid{background:var(--zp-ai-bg);color:var(--zp-ai-ink);}
.zp-tool-did{display:block;margin-top:.2rem;color:var(--zp-muted);line-height:1.5;}
.zp-arrow{grid-column:2;justify-self:end;width:32px;height:32px;margin-top:-2px;border-radius:50%;display:grid;place-items:center;}
.zp-arrow::before{content:"";width:8px;height:8px;margin-top:-4px;border-right:2px solid var(--zp-ink);border-bottom:2px solid var(--zp-ink);
  transform:rotate(45deg);transition:transform .3s var(--zp-ease);}
.zp-tool[open] .zp-arrow::before{transform:rotate(-135deg);margin-top:3px;}
.zp-tool > summary:hover .zp-arrow{background:var(--zp-ground);}
.zp-tool-explain{margin:0 2.6rem .95rem 0;padding:.75rem .95rem;border-left:3px solid var(--zp-accent);border-radius:0 10px 10px 0;
  background:var(--zp-ground);line-height:1.55;}

/* how zippr would optimise this: every step marked by who does it */
.zp-opt-sum{font-weight:400;font-size:clamp(19.5px,calc(18.8px + .2vw),21.6px);line-height:1.45;text-wrap:pretty;}
.zp-tally{display:flex;gap:4px;height:14px;margin-top:1rem;}
.zp-tally span{flex:1;border-radius:4px;}
.zp-cell-code{background:var(--zp-code);}
.zp-cell-ai{background:var(--zp-accent);}
.zp-cell-person{background:transparent;box-shadow:inset 0 0 0 2px var(--zp-ink);}
.zp-legend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:.6rem;font-size:15px;color:var(--zp-muted);}
.zp-legend span{display:inline-flex;align-items:center;gap:.4rem;}
.zp-legend span::before{content:"";width:12px;height:12px;border-radius:3px;}
.zp-legend .zp-l-code::before{background:var(--zp-code);}
.zp-legend .zp-l-ai::before{background:var(--zp-accent);}
.zp-legend .zp-l-person::before{box-shadow:inset 0 0 0 2px var(--zp-ink);}
.zp-steps{list-style:none;margin-top:1rem;display:grid;gap:.6rem;counter-reset:zp-step;}
.zp-step{counter-increment:zp-step;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.8rem;row-gap:.2rem;
  padding:.8rem .95rem;border-radius:14px;background:var(--zp-ground);}
.zp-step::before{content:counter(zp-step);grid-row:1/span 3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:600;background:var(--zp-sheet);color:var(--zp-ink);}
.zp-step-name{font-weight:600;line-height:1.4;}
.zp-how{justify-self:start;display:inline-flex;align-items:center;min-height:28px;padding:0 .65rem;border-radius:999px;font-size:15px;font-weight:600;line-height:1;}
.zp-how-code{background:var(--zp-code);color:var(--zp-code-ink);}
.zp-how-ai{background:var(--zp-ai-bg);color:var(--zp-ai-ink);}
.zp-how-person{background:transparent;color:var(--zp-ink);box-shadow:inset 0 0 0 1.5px var(--zp-ink);}
.zp-step-note{color:var(--zp-muted);line-height:1.5;}

/* ---------- open and close, gently (never under reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .zp-pop{interpolate-size:allow-keywords;transition:opacity .28s var(--zp-ease),transform .28s var(--zp-ease),overlay .28s allow-discrete,display .28s allow-discrete;}
  .zp-pop[open]{opacity:1;transform:none;}
  @starting-style{.zp-pop[open]{opacity:0;transform:translateY(14px) scale(.985);}}
  .zp-topic::details-content,.zp-tool::details-content{height:0;overflow:clip;
    transition:height .32s var(--zp-ease),content-visibility .32s allow-discrete;}
  .zp-topic[open]::details-content,.zp-tool[open]::details-content{height:auto;}
  .zp-media{transition:height .35s var(--zp-ease);}
}

/* ---------- a phone: the whole video at the top, never cropped to a band; tap it to enlarge. A page screenshot
   shows whole, full width, below the close button. Every task opens at its top (popup.js) ---------- */
@media (max-width:760px){
  .zp-pop{width:100vw;height:100dvh;border-radius:0;box-shadow:none;overscroll-behavior:contain;}
  .zp-box{display:flex;flex-direction:column;}
  .zp-media{flex:none;height:clamp(240px,40dvh,360px);padding:0;background:var(--zp-night);}
  .zp-pop.is-big .zp-media{height:min(72dvh,calc(100vw * 16 / 9));}
  .zp-media{container-type:normal;}
  .zp-frame{width:100%;height:100%;border-radius:0;aspect-ratio:auto;}
  .zp-frame video,.zp-frame img{object-fit:contain;object-position:50% 50%;}
  .zp-media:has(.is-still){height:auto;padding:62px 16px 16px;background:var(--zp-ground);}
  .zp-frame.is-still{position:relative;width:100%;height:auto;margin-inline:auto;aspect-ratio:var(--zp-aspect);border-radius:10px;}
  .zp-frame.is-still img{object-fit:cover;object-position:50% 0;border-radius:10px;}
  .zp-frame.is-still .zp-grow{display:none;}
  .zp-pop.is-big .zp-frame video,.zp-pop.is-big .zp-frame img{object-fit:contain;}
  .zp-grow{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in;}
  .zp-pop.is-big .zp-grow{cursor:zoom-out;}
  .zp-grow-label{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .95rem;
    border-radius:999px;background:rgba(12,19,34,.78);color:#FFFFFF;font-size:15px;font-weight:600;line-height:1;}
  .zp-grow-label::before{content:"";width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-top:-5px;}
  .zp-pop.is-big .zp-grow-label::before{transform:rotate(135deg);margin-top:5px;}
  .zp-play{width:56px;height:56px;margin:-28px 0 0 -28px;}
  .zp-close{right:10px;top:10px;background:var(--zp-sheet);color:var(--zp-ink);box-shadow:0 6px 18px -6px rgba(12,19,34,.6);}
  .zp-close:hover{background:var(--zp-ground);}
  .zp-side{flex:1;padding:20px 20px 40px;}
  .zp-group,.zp-title{padding-right:0;}
  .zp-tool-explain{margin-right:0;}
}