/* WS Apps page (/apps and /apps/report). Kept apart from site.css so two people can work on the site at once. */
.app-grid,.app-rig,.app-fig,.app-prin,.app-tiles,.mb{max-width:var(--wrap)}
/* hero tiles: nine compact rows, icon left */
.app-tiles{grid-template-columns:1fr;gap:8px}
@media (min-width:640px){.app-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media (min-width:1000px){.app-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.at{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-content:center;align-items:center;padding:12px 16px;min-height:76px}
.at img{grid-row:1/span 2;width:44px;height:44px;margin:0}
.at-n{font-size:17px}
.at-s{margin-top:2px;font-size:13.5px;line-height:1.4}
/* principles: eight tiles */
@media (min-width:1100px){.app-prin{grid-template-columns:repeat(4,1fr)}}
/* detail cards: short cards three in a row */
@media (min-width:900px){#apps .app-grid{grid-template-columns:repeat(3,1fr)}#apps-biz .app-grid{grid-template-columns:1fr;gap:16px;margin-top:32px}}
#apps-biz{padding-block:96px}
#apps-biz h2.h-dark{font-size:clamp(32px,3.6vw,52px)!important}
#apps-biz .app-av{max-width:680px;margin:20px auto 0 max(0px,calc((100% - var(--wrap))/2));font-size:17px;line-height:1.55;color:var(--mute-d)}
#apps-biz .app-l a{color:var(--ink-d);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){#apps-biz{padding-block:64px}}
/* report form */
.rep{display:grid;gap:16px;max-width:680px;margin-top:32px}
.rep-row{display:grid;gap:12px}
@media (min-width:640px){.rep-row{grid-template-columns:1.4fr .8fr 1.2fr}}
.rep label{display:grid;gap:6px;font-size:14px;color:var(--mute-d)}
.rep input,.rep textarea{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:0;border-radius:var(--r-btn);background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d);color:var(--ink-d);font:400 16px/1.4 var(--sans)}
.rep textarea{resize:vertical}
.rep input:focus-visible,.rep textarea:focus-visible{outline:2px solid var(--ink-d);outline-offset:1px}
.rep .btn-p{justify-self:start}
.rep-priv{margin:0;font-size:13px;line-height:1.5;color:var(--mute-d)}
/* cards may never widen the page: columns shrink, long unbroken text wraps */
#apps .app-grid,#apps-biz .app-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){#apps .app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.app-card{min-width:0}
.app-card :is(p,li,h3,dd,dt,summary){overflow-wrap:anywhere}
@media (max-width:600px){.app-pl span{white-space:normal}}
/* hero: two families side by side, details below */
#ld-hero:has(.duo){padding-top:100px;padding-bottom:88px;background:#000 url(/assets/grain-bg.png) 0 0/128px 128px}
#ld-hero:has(.duo) h1.h-dark{font-size:clamp(36px,4.4vw,60px)!important;line-height:1.05!important;max-width:980px!important;text-wrap:balance}
.duo{display:grid;gap:14px;max-width:var(--wrap);margin-top:32px}
@media (min-width:900px){.duo{grid-template-columns:7fr 5fr}}
.duo-p{display:flex;flex-direction:column;gap:14px;padding:30px 28px;border-radius:var(--r-card);background:var(--s1);box-shadow:inset 0 0 0 1px var(--ring-d);color:inherit;text-decoration:none;transition:box-shadow .18s}
.duo-p:hover{box-shadow:inset 0 0 0 1px var(--mute-d)}
.duo-p:focus-visible{outline:2px solid var(--ink-d);outline-offset:2px}
.duo-p h2{margin:0;font:500 clamp(26px,2.6vw,36px)/1.12 var(--sans);letter-spacing:-.02em;color:var(--ink-d);text-wrap:balance}
.duo-p>p{margin:0;font-size:16px;line-height:1.55;color:var(--mute-d)}
.duo-chips{display:flex;flex-wrap:wrap;gap:8px}
.duo-chips span{font:500 13px/1 var(--mono);color:var(--ink-d);padding:8px 10px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--ring-d)}
.duo-icons{display:flex;flex-wrap:wrap;gap:8px}
.duo-icons img{width:32px;height:32px}
.duo-link{margin-top:auto;padding-top:6px;font:500 15px/1.4 var(--sans);color:var(--ink-d);text-decoration:underline;text-underline-offset:4px}
#apps-free{padding-block:96px}
#apps-free h2.h-dark{font-size:clamp(32px,3.6vw,52px)!important}
#apps-free .app-av{max-width:680px;margin:20px auto 0 max(0px,calc((100% - var(--wrap))/2));font-size:17px;line-height:1.55;color:var(--mute-d)}
#apps-free .app-tiles{margin-top:28px}
.app-card,#apps-free,#apps-biz{scroll-margin-top:72px}
@media (max-width:600px){#apps-free{padding-block:64px}.duo-p{padding:24px 20px}}
/* critic round 5 */
#apps-free .app-tiles{margin:28px auto 0}
.app-card h3{overflow-wrap:normal}
@media (min-width:900px){.app-card:not(:has(.app-r)) .app-name{font-size:clamp(24px,2.1vw,30px)}}
.mb-strip{padding:12px 16px;height:auto}
.mb-strip img{width:min(672px,100%);height:auto}
@media (max-width:460px){.mb-strip{padding:8px}}
.duo-p{position:relative}
.duo-p:hover{box-shadow:inset 0 0 0 1px var(--ring-d)}
.duo-p:has(.duo-link:hover){box-shadow:inset 0 0 0 1px var(--mute-d)}
.duo-p:has(.duo-link:focus-visible){outline:2px solid var(--ink-d);outline-offset:2px}
.duo-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.duo-link:focus-visible{outline:none}
.duo-foot{margin:auto 0 0;padding-top:6px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline}
.duo-link{padding-top:0;margin-top:0}
.duo-tell{position:relative;z-index:1;font:500 15px/1.4 var(--sans);color:var(--mute-d);text-decoration:underline;text-underline-offset:4px}
.duo-tell:hover{color:var(--ink-d)}
.duo-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.duo-list li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4;color:var(--mute-d)}
.duo-list li::before{content:none}
.duo-list b{color:var(--ink-d);font-weight:500}
.duo-list img{width:32px;height:32px;flex:none}
.af-chips{margin:14px 0 10px}
#apps-biz .app-card{padding:40px}
#apps-biz .app-card:not(:has(.app-r)) .app-l{max-width:680px}
@media (max-width:600px){#apps-biz .app-card{padding:24px 20px}.app-prin{gap:4px}.app-prin div{background:none;box-shadow:none;padding:12px 0}}
#apps-made{padding-block:96px}
#apps-made h2.h-dark{font-size:clamp(32px,3.6vw,52px)!important}
#apps-made .app-av{max-width:680px;margin:20px auto 0 max(0px,calc((100% - var(--wrap))/2));font-size:17px;line-height:1.55;color:var(--mute-d)}
@media (max-width:600px){#apps-made{padding-block:64px}}
main:has(#rep)>section:first-child{background:#000 url(/assets/grain-bg.png) 0 0/128px 128px}
@media (max-width:639px){.rep-row{grid-template-columns:1fr 1fr}.rep-row label:first-child{grid-column:1/-1}}
.rep-err{margin:-6px 0 0;font-size:14px;color:#ff8a80}
html:is(:lang(ru),:lang(uk)) #ld-hero:has(.duo) h1.h-dark{font-size:clamp(32px,3.8vw,52px)!important}
/* chart reads itself: the result sits right after the short bar */
.af-t{overflow:visible}
.af-tag{position:absolute;inset-block:0;inset-inline-start:calc(8.7% + 10px);display:flex;align-items:center;font:600 14px/1 var(--sans);color:var(--ink-d);white-space:nowrap}
.af-h{font-weight:600}
.mb-strip img{width:min(672px,100%);height:auto}
/* WS.Remote: pobieranie na karcie */
.app-dl{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.app-more{color:var(--ink-d);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ring-d)}
.app-more:hover{text-decoration-color:var(--ink-d)}
/* przyciski pobierania z ikonami systemów: Windows · macOS · Linux (os_buttons.py) */
.os-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.os-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 16px;border-radius:var(--r-btn);font:600 15px/1 var(--sans);color:var(--ink-d);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--ring-d);transition:background .18s var(--ease),box-shadow .18s}
.os-btn svg{width:22px;height:22px;fill:currentColor;flex:none}
a.os-btn:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.os-off{opacity:.5;cursor:default}
.os-off em{font:500 11px/1 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.04em;padding:4px 6px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--ring-d)}
@media (max-width:460px){.os-row{display:grid;grid-template-columns:1fr 1fr}.os-off{grid-column:1/-1}}