/* Swiftly web · pages-blog.css
   Page parts for /blog/ and /whats-new/, on top of tokens.css + kit.css.
   Values the kit does not have yet are named here first (--pb-*); move them into tokens.css when the kit takes them. */
:root{
  --pb-fs-article-title:56px;      /* long article headlines: 76px breaks them into 4 lines */
  --pb-fs-article-title-m:34px;
  --pb-fs-topic:44px;              /* blog topic headlines, between prose h2 and section h2 */
  --pb-fs-topic-m:30px;
  --pb-fs-version-mark:300px;      /* the quiet giant version number behind the release hero */
  --pb-fs-version-mark-m:120px;
  --pb-toc-top:calc(var(--sw-nav-h) + var(--sw-space-6));
  --pb-phone-w:240px;
  --pb-fs-version-hero:240px;     /* the version number as the release hero */
  --pb-fs-version-hero-m:96px;
  --pb-fade-mark:linear-gradient(#000 20%,transparent 95%);
}

/* shell fixes: sticky nav needs overflow clip, not hidden; logo as a link */
.sw-page{overflow:clip}
.sw-nav--sticky{z-index:20}
.sw-nav__logo.pb-logo svg{display:block;width:100%;height:100%;fill:currentColor}
.pb-logo:focus-visible{outline:2px solid var(--sw-focus);outline-offset:4px;border-radius:4px}
.pb-skip{position:absolute;left:var(--sw-space-4);top:var(--sw-space-2);z-index:30;padding:var(--sw-space-2) var(--sw-space-3);background:var(--sw-accent);color:var(--sw-ink);font:700 var(--sw-fs-ui)/1 var(--sw-font);transform:translateY(-200%)}
.pb-skip:focus{transform:none}
html{scroll-padding-top:calc(var(--sw-nav-h) + var(--sw-space-4))}
body{margin:0;background:var(--sw-bg)}

/* mobile menu panel (the kit has only the button) */
.pb-menu{position:fixed;z-index:19;left:0;right:0;top:var(--sw-nav-h-mobile);display:flex;flex-direction:column;padding:var(--sw-space-3) var(--sw-pad-mobile) var(--sw-space-6);background:var(--sw-nav-bg);box-shadow:var(--sw-shadow-pop)}
.pb-menu[hidden]{display:none}
.pb-menu a{padding:var(--sw-space-4) 0;border-top:1px solid var(--sw-line-strong);font:700 var(--sw-fs-lead)/1 var(--sw-font);color:var(--sw-text-2);text-decoration:none}
.pb-menu a:first-child{border-top:0}
.pb-menu a[aria-current]{color:var(--sw-text)}

/* shared section headline for topics and "Keep reading" */
.pb-h2{grid-column:1/7;margin:0;font:900 var(--pb-fs-topic)/1 var(--sw-font);letter-spacing:var(--sw-track-display)}
.pb-h2 i{font-style:normal;color:var(--sw-accent)}

/* ===== blog overview ===== */
.pb-jump{display:flex;flex-wrap:wrap;gap:var(--sw-space-2)}
.pb-lead{padding-top:0}
.pb-feature{grid-column:1/-1;flex-direction:row}
.pb-feature .sw-card__media{width:58%;aspect-ratio:var(--sw-ratio-media);object-fit:cover;object-position:left top}
.pb-feature .sw-card__body{padding:var(--sw-space-7) var(--sw-space-6);justify-content:center}
.pb-feature h2{margin:0;font:900 var(--sw-fs-badge)/1.05 var(--sw-font);letter-spacing:var(--sw-track-h3)}
.pb-feature p{font-size:var(--sw-fs-body)}
.pb-topic{padding:var(--sw-space-8) 0}
.pb-topic__intro{grid-column:7/13;align-self:end;margin:0;font:500 var(--sw-fs-ui-lg)/1.4 var(--sw-font);color:var(--sw-text-3)}
.pb-topic .sw-cards,.pb-related .sw-cards{grid-row:2;margin-top:var(--sw-space-6)}
.sw-card .sw-card__body h3{font-size:var(--sw-fs-prose-h3);line-height:1.15}
.pb-empty{grid-column:1/9;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sw-space-4)}
.pb-empty>svg{width:40px;height:40px;fill:var(--sw-accent)}
.pb-empty h2{margin:0;font:900 var(--sw-fs-prose-h2)/1.1 var(--sw-font);letter-spacing:var(--sw-track-h3)}
.pb-empty p{margin:0;font:500 var(--sw-fs-body-lg)/1.5 var(--sw-font);color:var(--sw-text-2)}

/* ===== article ===== */
.pb-title{grid-column:1/11;font-size:var(--pb-fs-article-title);line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
.pb-head .sw-page-head__sub{grid-column:1/9}
.pb-article{padding-top:var(--sw-space-7)}
.pb-toc{grid-column:1/4;grid-row:1;align-self:start;position:sticky;top:var(--pb-toc-top);padding-right:var(--sw-space-6);max-height:calc(100vh - var(--pb-toc-top) - var(--sw-space-6));overflow:auto}
.pb-toc h2{margin:0 0 var(--sw-space-3);font:700 var(--sw-fs-small)/1 var(--sw-font);color:var(--sw-text-3)}
.pb-toc ol{margin:0;padding:0;list-style:none}
.pb-toc a{display:block;padding:var(--sw-space-2) 0;font:600 var(--sw-fs-ui)/1.35 var(--sw-font);color:var(--sw-text-3);text-decoration:none;transition:color var(--sw-dur-200)}
.pb-toc a:hover{color:var(--sw-text)}
.pb-toc a:focus-visible{outline:2px solid var(--sw-focus);outline-offset:2px;border-radius:2px}
.sw-prose.pb-prose{grid-column:4/12;grid-row:1}
.pb-prose h2,.pb-prose h3{scroll-margin-top:calc(var(--sw-nav-h) + var(--sw-space-4))}
.pb-prose .sw-callout{margin:0 0 var(--sw-space-6)}
.pb-prose .sw-callout p+p{margin-top:var(--sw-space-2)}
.pb-disclosure p{font-size:var(--sw-fs-body-sm)}
.pb-swiftly>svg{fill:var(--sw-accent)}
.pb-swiftly__more a{color:var(--sw-accent);font-weight:var(--sw-fw-bold);text-decoration:none}
.pb-swiftly__more a:hover{text-decoration:underline}
/* TL;DR box */
.pb-prose .kurz{margin:0 0 var(--sw-space-7);padding:var(--sw-space-5) var(--sw-space-6);background:var(--sw-surface);box-shadow:inset 0 0 0 .5px var(--sw-line-tile)}
.pb-prose .kurz h2{margin:0 0 var(--sw-space-3);font-size:var(--sw-fs-prose-h3)}
.pb-prose .kurz ul{margin:0}
/* tables scroll sideways on narrow screens */
.pb-prose .tabelle{margin:var(--sw-space-5) 0;overflow-x:auto}
.pb-prose .tabelle table{margin:0;min-width:36em}
/* code with copy button */
.pb-prose .codeblock{position:relative}
.pb-copy{position:absolute;top:var(--sw-space-3);right:var(--sw-space-3);height:32px}
.pb-prose .befehlszeile{margin-top:calc(-1*var(--sw-space-2));font-size:var(--sw-fs-body-sm);color:var(--sw-text-3)}
/* figures */
.pb-prose .abbildung{display:block;width:100%;height:auto;box-shadow:var(--sw-ring-hair)}
.pb-prose .abbildung.hoch{max-width:24em;margin-inline:auto}
.pb-prose .quelle{display:block;margin-top:var(--sw-space-1)}
/* FAQ: open/close rows */
.pb-prose .fragen__blatt{margin:var(--sw-space-5) 0 var(--sw-space-7)}
.pb-prose .frage{border-top:1px solid var(--sw-line-strong)}
.pb-prose .frage:last-child{border-bottom:1px solid var(--sw-line-strong)}
.pb-prose .frage__knopf{display:flex;justify-content:space-between;align-items:center;gap:var(--sw-space-4);padding:var(--sw-space-4) 0;cursor:pointer;list-style:none}
.pb-prose .frage__knopf::-webkit-details-marker{display:none}
.pb-prose .frage__knopf:focus-visible{outline:2px solid var(--sw-focus);outline-offset:2px}
.pb-prose .frage__knopf h3{margin:0;font-size:var(--sw-fs-ui-lg);line-height:1.35}
.pb-prose .frage__pfeil{width:18px;height:18px;flex:none;fill:currentColor;color:var(--sw-accent);transition:transform var(--sw-dur-300) var(--sw-ease-out)}
.pb-prose .frage[open] .frage__pfeil{transform:rotate(90deg)}
.pb-prose .frage__antwort{padding:0 0 var(--sw-space-4);font-size:var(--sw-fs-body)}
.pb-prose .frage__antwort p:last-child{margin-bottom:0}
.pb-back{margin:var(--sw-space-8) 0 0}
.pb-related{padding-top:0}

/* 404 */
.pb-404{min-height:50vh}
.pb-404__ways{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sw-space-5);margin-top:var(--sw-space-7)}

/* ===== What's new: overview ===== */
.wn-latest-wrap{padding-top:0}
.wn-latest{grid-column:1/-1;position:relative;display:grid;grid-template-columns:subgrid;align-items:center;min-height:520px;overflow:hidden;background:var(--sw-surface);box-shadow:inset 0 0 0 .5px var(--sw-line-tile);color:var(--sw-text);text-decoration:none;isolation:isolate;transition:background-color var(--sw-dur-200)}
.wn-latest:hover{background:var(--sw-surface-2)}
.wn-latest:hover .sw-card__more svg{transform:translateX(4px)}
.wn-latest:active{transform:scale(.995)}
.wn-latest:focus-visible{outline:2px solid var(--sw-focus);outline-offset:3px}
.wn-latest__num{position:absolute;z-index:-1;right:calc(-1*var(--sw-space-5));bottom:calc(-.2*var(--pb-fs-version-mark));font:900 var(--pb-fs-version-mark)/1 var(--sw-font);letter-spacing:var(--sw-track-display);color:var(--sw-surface-3);-webkit-mask:var(--pb-fade-mark);mask:var(--pb-fade-mark)}
.wn-latest__text{grid-column:1/8;display:flex;flex-direction:column;gap:var(--sw-space-4);padding:var(--sw-space-8) var(--sw-space-6)}
.wn-latest h2{margin:var(--sw-space-2) 0 0;font:900 var(--sw-fs-h2)/.98 var(--sw-font);letter-spacing:var(--sw-track-display)}
.wn-latest h2 i{font-style:normal;color:var(--sw-accent)}
.wn-latest p{margin:0;max-width:30em;font:500 var(--sw-fs-body-lg)/1.45 var(--sw-font);color:var(--sw-text-2)}
.wn-latest__groups{display:flex;flex-wrap:wrap;gap:var(--sw-space-2) var(--sw-space-4);font:700 var(--sw-fs-ui)/1.4 var(--sw-font);color:var(--sw-text-3)}
.wn-latest__groups span+span::before{content:"·";margin-right:var(--sw-space-4);color:var(--sw-text-dim)}
.wn-latest .sw-card__more{max-width:30em}
.wn-latest__phone{grid-column:9/12;align-self:end;width:100%;margin-bottom:calc(-1*var(--sw-space-9));filter:var(--sw-shadow-phone-lg)}
.wn-list{grid-column:1/-1;grid-row:2;margin:var(--sw-space-6) 0 0;padding:0;list-style:none}
.wn-list a{display:grid;grid-template-columns:var(--sw-col) 1fr auto 24px;gap:var(--sw-space-5);align-items:baseline;padding:var(--sw-space-5) 0;border-top:1px solid var(--sw-line-strong);color:var(--sw-text);text-decoration:none}
.wn-list li:last-child a{border-bottom:1px solid var(--sw-line-strong)}
.wn-list__v{font:900 var(--sw-fs-badge)/1 var(--sw-font);letter-spacing:-.04em;color:var(--sw-accent)}
.wn-list__t b{display:block;font:800 var(--sw-fs-h3)/1.15 var(--sw-font);letter-spacing:var(--sw-track-h3)}
.wn-list__t span{display:block;margin-top:var(--sw-space-1);font:500 var(--sw-fs-body)/1.4 var(--sw-font);color:var(--sw-text-3)}
.wn-list svg{width:20px;height:20px;fill:var(--sw-accent);transition:transform var(--sw-dur-300) var(--sw-ease-out)}
.wn-list a:hover svg{transform:translateX(4px)}

/* ===== What's new: one release ===== */
.wn-hero{padding-bottom:var(--sw-space-8)}
.wn-hero__num{grid-column:1/10;grid-row:2;margin:0 0 var(--sw-space-6);font:900 var(--pb-fs-version-hero)/.78 var(--sw-font);letter-spacing:var(--sw-track-display);color:var(--sw-accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.wn-hero__text{grid-column:1/9;grid-row:3;display:flex;flex-direction:column}
.wn-hero__title{margin-top:var(--sw-space-5)}
.wn-hero__text .sw-page-head__sub{max-width:28em}
.wn-hero__phone{grid-column:10/13;grid-row:2/4;align-self:end;width:100%;max-width:var(--pb-phone-w);justify-self:center;filter:var(--sw-shadow-phone-lg)}
.wn-body{padding-top:var(--sw-space-8)}
.wn-body .sw-changes{row-gap:var(--sw-space-8)}
.sw-changes__list b{color:var(--sw-text);font-weight:var(--sw-fw-bold)}
.wn-group--phone{grid-template-rows:auto 1fr}
.wn-group--phone .sw-changes__icon,.wn-group--phone .sw-changes__title{grid-row:1}
.wn-group--phone .sw-changes__title{grid-column:2/9}
.wn-group--phone .sw-changes__list{grid-row:2;align-self:start}
.wn-group--phone .wn-shot{grid-column:10/13;grid-row:1/3;margin:0;align-self:start}
.wn-shot--phone .sw-iphone{display:block;width:100%;max-width:var(--pb-phone-w);margin-inline:auto;filter:var(--sw-shadow-phone)}
.wn-shot figcaption{margin-top:var(--sw-space-4);font:600 var(--sw-fs-small)/1.4 var(--sw-font);color:var(--sw-text-3);text-align:center}
.wn-group--window .wn-shot{grid-column:2/-1;margin:var(--sw-space-6) 0 0}
.wn-shot--window img{display:block;width:100%;height:auto;filter:var(--sw-shadow-window)}
.wn-shot--window figcaption{text-align:left}
.wn-after{grid-column:2/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--sw-space-5);margin-top:var(--sw-space-8);padding-top:var(--sw-space-5);border-top:1px solid var(--sw-line-strong)}
.wn-after__older{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sw-space-1);color:var(--sw-text);text-decoration:none;font:800 var(--sw-fs-ui-lg)/1.2 var(--sw-font)}
.wn-after__older:hover b{color:var(--sw-accent)}

@media (prefers-reduced-motion:reduce){.pb-toc a,.pb-prose .frage__pfeil,.wn-list svg,.wn-latest{transition:none}}

/* ===== mobile (page width under 600px) ===== */
@container swp (max-width:600px){
  .pb-menu{top:var(--sw-nav-h-mobile)}
  .sw-nav.is-dl .sw-nav__discord{display:none} /* kit: Download and Discord collide in column 2-3 */
  .pb-h2{grid-column:1/-1;font-size:var(--pb-fs-topic-m)}
  .pb-topic__intro{grid-column:1/-1;grid-row:2;margin-top:var(--sw-space-3)}
  .pb-topic .sw-cards,.pb-related .sw-cards{grid-row:3;margin-top:var(--sw-space-5)}
  .sw-cards>.sw-card{grid-column:1/-1}
  .pb-feature{grid-column:1/-1;flex-direction:column}
  .pb-feature .sw-card__media{width:100%}
  .pb-feature .sw-card__body{padding:var(--sw-space-5)}
  .pb-feature h2{font-size:var(--sw-fs-h3)}
  .pb-empty{grid-column:1/-1}
  .pb-title{grid-column:1/-1;font-size:var(--pb-fs-article-title-m)}
  .pb-head .sw-page-head__sub{grid-column:1/-1}
  .pb-toc{display:none}
  .sw-prose.pb-prose{grid-column:1/-1}
  .pb-prose .kurz{padding:var(--sw-space-4)}
  .wn-latest{min-height:0}
  .wn-latest__text{grid-column:1/-1;padding:var(--sw-space-6) var(--sw-space-5) var(--sw-space-5)}
  .wn-latest h2{font-size:var(--pb-fs-topic)}
  .wn-latest__phone{display:none}
  .wn-latest__num{font-size:var(--pb-fs-version-mark-m)}
  .wn-list a{grid-template-columns:1fr auto;gap:var(--sw-space-2) var(--sw-space-4)}
  .wn-list__v{grid-column:1/-1}
  .wn-list svg{display:none}
  .wn-hero{padding-bottom:var(--sw-space-7)}
  .wn-hero__num{grid-column:1/-1;font-size:var(--pb-fs-version-hero-m);margin-bottom:var(--sw-space-5)}
  .wn-hero__text{grid-column:1/-1}
  .wn-hero__title{font-size:var(--pb-fs-topic)}
  .wn-hero__phone{display:none}
  .wn-group--phone{grid-template-rows:none}
  .wn-group--phone .sw-changes__title,.wn-group--phone .sw-changes__list{grid-column:2}
  .wn-group--phone .sw-changes__list{grid-row:2}
  .wn-group--phone .wn-shot{grid-column:2;grid-row:3;margin-top:var(--sw-space-5);justify-self:start}
  .wn-shot--phone .sw-iphone{width:var(--pb-phone-w);max-width:70%;margin:0}
  .wn-shot figcaption{text-align:left}
  .wn-group--window .wn-shot{grid-column:1/-1}
  .wn-after{grid-column:1/-1;flex-direction:column;align-items:flex-start}
  .wn-after__older{align-items:flex-start}
}