/* Server-rendered info pages (templates-new/*) - only what the app bundle (wga-info.css & co.) does not draw:
   real images in place of the prototype's SVG art, prose inside real articles, states the prototype toggles
   by rendering or not rendering (here: the hidden attribute), links where the prototype has buttons. */

/* the prototype shows/hides by mounting; here markup is always there */
.ln-menu[hidden],.langpop[hidden],[data-view][hidden],.lp-q p[hidden],.dgn-hide{display:none!important}
.stage .ln-menu{z-index:10000} /* above the cookie notice (z-index 9999), which painted over the open menu */
.inf.mob .lg-side,.inf.mob .ar-share{display:none}
.inf:not(.mob) .lg-mtoc{display:none}

/* real pictures where the boards draw <Art> */
.bl-m img,.bl-m picture,.ar-cover img,.ar-cover picture,.ab-ph img,.ab-ph picture,.ar-av img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.bl-m picture img,.ar-cover picture img,.ab-ph picture img{inline-size:100%;block-size:100%;object-fit:cover}

/* blog: category chips are links (real category URLs), styled like the prototype's buttons */
.bl-cats a{flex:none;display:inline-flex;align-items:center;block-size:36px;padding:0 16px;border-radius:100px;border:1px solid var(--bd2);background:transparent;font:400 14px Inter,sans-serif;color:var(--ink);text-decoration:none}
.inf .bl-cats a:hover{color:var(--ink);border-color:var(--ink)}
.inf .bl-cats a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.bl-h2 a{color:inherit;text-decoration:none}
.dgn-empty{font-size:16px;color:var(--mut);padding-block:24px}
.dgn-pager{display:flex;gap:8px;margin-block-start:48px}

/* article: the key takeaways box follows the text column (logical margins, so he/ar mirror it) */
.inf:not(.mob) .ar-key{margin-block:56px 0;margin-inline:581px 0}
@media (max-width:1760px){.inf:not(.mob) .ar-key{margin-inline-start:248px}}
.ar-key ul{padding-inline-start:22px;margin:0}
.inf .lp-art .ar-key,.inf:not(.mob) .lp-art .ar-key{margin:32px 0 48px;max-inline-size:none}
.lp-art .lg-text .ar-key h2{margin-block-start:0}
.ar-lede{font-size:20px!important;line-height:30px!important;color:var(--ink)}

/* prose the seeded articles carry (lists, callouts, sub-headings, tables, figures) */
.ar-text ul,.ar-text ol,.lg-text ul,.lg-text ol{padding-inline-start:22px;margin:0 0 20px}
.ar-text li{font-size:18px;line-height:27px;margin:0 0 8px}
.ar-text h3,.lp-art .lg-text h3{font-size:22px;font-weight:700;line-height:1.35;margin:32px 0 12px}
.ar-text blockquote,.lg-text blockquote{margin:24px 0;padding:16px 20px;border-inline-start:3px solid var(--cta);border-radius:12px;background:rgba(255,255,255,.62);font-size:17px;line-height:27px}
.ar-text blockquote p:last-child,.lg-text blockquote p:last-child{margin:0}
.ar-text .callout--before{border-inline-start-color:var(--bd2)}
.ar-text .callout--after{border-inline-start-color:#6a9e80}
.ar-text a,.lg-text p a,.lg-text section li a{color:var(--cta);text-decoration:underline;text-underline-offset:2px}
.ar-text table{inline-size:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.ar-text th,.ar-text td{padding:10px 12px;border-block-end:1px solid var(--bd);text-align:start;vertical-align:top}
.ar-text figure{margin:32px 0}
.ar-text figure img{display:block;max-inline-size:100%;block-size:auto;border-radius:12px}
.ar-text figcaption{font-size:14px;color:var(--mut);margin-block-start:8px}
.ar-text details{margin:0 0 16px}
.ar-faq{margin-block-start:56px}
.ar-faq .lp-q button{font-size:20px;line-height:26px;min-block-size:72px}
.ar-faq .lp-q p{font-size:17px}
.dgn-further{list-style:disc}

/* help: search results and the views the prototype swaps by props */
.hl-res li a{display:flex;flex-direction:column;justify-content:center;gap:2px}
.hl-res small{font-size:13px;color:var(--mut)}
.hl-none{font-size:16px;color:var(--mut);text-align:center;margin-block-start:16px}
.hl-note{font-size:14px;margin-block-start:10px;min-block-size:20px}
.hl-note.ok{color:#2e7d4f}.hl-note.err{color:#b3261e}
.hl-help.done button{display:none}
.hl-form input,.hl-form textarea{inline-size:100%}

/* about: the old copy has four values, not three */
.ab-cols.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.inf.mob .ab-cols.n4{grid-template-columns:minmax(0,1fr)}
.ab-founder .ab-pill{margin-block-start:8px}
.ab-people{margin-block-start:72px}
.ab-people .ab-trust{grid-template-columns:repeat(4,minmax(0,1fr))}
.inf.mob .ab-people .ab-trust{grid-template-columns:minmax(0,1fr)}
.dgn-sr{position:absolute!important;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lp-band .nf-pri{display:inline-flex;align-items:center}

/* cookie notice (plugin simple-cookie-notice, inline-styled as a dark bar) -> a glass card in the app's tokens */
body.dgn #jlplg-lovecoding-cookie-info-container{left:16px;right:auto;inset-block-end:16px!important;inline-size:auto;max-inline-size:440px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.94)!important;border:1px solid var(--bd2);box-shadow:0 12px 30px rgba(60,48,36,.14);backdrop-filter:blur(8px);text-align:start;font-family:Inter,system-ui,sans-serif}
body.dgn #jlplg-lovecoding-cookie-info-container .jlplg-lovecoding-cookie-info{display:block;padding:0;margin:0 0 12px;font-size:14px;line-height:21px;color:var(--ink)!important}
body.dgn #jlplg-lovecoding-cookie-info-container .jlplg-lovecoding-buttons{justify-content:flex-start;margin:0;gap:8px}
body.dgn #cookie-accept-button{block-size:36px;padding:0 18px;border-radius:100px;background:var(--ink)!important;border:0}
body.dgn #cookie-accept-button .button-text{color:#fff!important;font:500 14px Inter,sans-serif;text-transform:none}
body.dgn .dg-cookie-decline{block-size:36px;padding:0 18px;margin:0;border-radius:100px;border:1px solid var(--bd2);background:#fff;color:var(--ink);font:500 14px Inter,sans-serif}
/* the accessibility button sits in the bottom-RIGHT corner in every language, so the card takes the bottom-left one
   in he/ar too (with logical insets it moved right in RTL and the button covered Accept). Only the position is
   physical: the text inside reads right to left. On a phone the card spans the width with the 16px gutters. */
@media (max-width:767px){body.dgn #jlplg-lovecoding-cookie-info-container{left:16px;right:16px;max-inline-size:none}}

/* share button feedback */
.ar-share button[data-done]::after{content:attr(data-done);position:absolute;margin-inline-start:48px;font-size:12px;color:var(--mut);white-space:nowrap}
.lp-art .ar-author{inline-size:auto;max-inline-size:none}
.ar-meta{flex-wrap:wrap;row-gap:6px}
.ar-meta .bl-chip,.bl-tx .bl-chip,.bl-ov .bl-chip{flex:none;white-space:nowrap}

/* help tiles between 1321 and ~1720px: three fixed 542px columns were wider than the screen (cut at 1440) */
@media (min-width:1321px){.inf:not(.mob) .hl-tiles{grid-template-columns:repeat(3,minmax(0,542px));margin-inline:24px}}
/* the page stage is its own stacking context, so no z-index lets the phone menu rise above the cookie notice
   (z-index 9999 outside the stage) - the notice steps aside while the menu is open */
body:has(.ln-menu:not([hidden])) .jlplg-lovecoding-cookie-info-container{display:none}

/* credits pop-over on server pages: the app CSS gives .balpop a display, [hidden] must still win (dgn_credits_button) */
.balwrap .balpop[hidden]{display:none}

/* category archives (29.09.2026): the lede under the H1 and each article's excerpt on its card, as the old archive had */
.bl-lede{font-size:17px;line-height:1.5;color:var(--mut,#5e5f5c);max-inline-size:760px;margin:0 0 20px;text-wrap:pretty}
.bl-card .bl-ex{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:14px;line-height:1.45;color:var(--mut,#5e5f5c);margin-block:6px 4px;font-weight:400}