/* Tarleaks blog — styles for /blog/ and /ar/blog/ only, loaded after site.css.
   Source of truth: this file (hand-written, committed). Spec: docs/programs/website-v2/ux-research.md 5.10.
   Rules: colours, type and spacing come from the tokens in site.css (so light, dark and RTL follow by
   themselves); logical properties only; nothing here needs JavaScript (blog.js only enhances). */
@layer components{

/* ------------------------------------------------------- index, category, author */
.blog-head{margin-block-end:var(--s-5)}
.blog-head h1{max-inline-size:22ch;font-size:clamp(32px,4.2vw,52px)}
html[lang="ar"] .blog-head h1{max-inline-size:none}
.blog-head .lead{max-inline-size:62ch}
.blog-head__links{margin-block-start:var(--s-3)}
.blog-cats{margin-block:var(--s-4) var(--s-5)}
.blog-cats .chiprow a[aria-current="page"]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);font-weight:650}
.blog-cats .chiprow .en-marker{margin-inline-start:6px}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s-4)}
.pgrid--feature{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.pcard{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5)}
.pcard--feature{background:var(--surface-1)}
.pcard__cat{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand)}
html[lang="ar"] .pcard__cat,.pcard[dir="rtl"] .pcard__cat{text-transform:none;letter-spacing:0;font-size:13.5px}
.pcard .ccard__title{font-size:19px;line-height:1.3;margin:0}
.pcard .ccard__text{font-size:15px;line-height:1.6}
.pcard__meta{margin:auto 0 0;padding-block-start:var(--s-3);font-size:13.5px;line-height:1.5;color:var(--text-3)}
.pcard__pillar{font-size:12px;text-transform:none;letter-spacing:0;font-weight:600}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);margin-block:var(--s-6)}
.pager__list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.pager__n,.pager__step{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--target);min-block-size:var(--target);
  padding-inline:14px;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);text-decoration:none;font-weight:600;background:var(--bg)}
a.pager__n:hover,a.pager__step:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
span.pager__n[aria-current]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.pager__step{min-inline-size:0}

/* ----------------------------------------------------------------------- post */
.post{margin-block-start:var(--s-4)}
.post-head{max-inline-size:900px}
.post-head h1{font-size:clamp(30px,3.8vw,46px);line-height:1.15;margin-block:var(--s-3) var(--s-3)}
html[lang="ar"] .post-head h1{line-height:1.4}
.post-head__cat{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:0;max-inline-size:none}
.post-head .lead{max-inline-size:68ch;margin-block:0 var(--s-3)}
.byline{list-style:none;display:flex;flex-wrap:wrap;gap:4px var(--s-4);margin:0;padding:0;max-inline-size:none;
  font-size:14.5px;color:var(--text-3)}
.byline{column-gap:var(--s-5)}
.byline a{color:var(--text-2)}
@media (max-width:719.98px){
  /* the H1 sits right under the trail and repeats the current page, which would wrap onto a line of its own */
  .post-crumbs .crumbs li:last-child{display:none}
}
.byline a:hover{color:var(--brand)}
.byline__tool .btn{min-block-size:var(--target);padding-block:0;padding-inline:8px;font-size:14.5px;font-weight:600}

.post__layout{display:block;margin-block-start:var(--s-5)}
.post__col{min-inline-size:0}
.post__col > * + *{margin-block-start:var(--s-4)}

/* table of contents (C09): a collapsed box on phones, a sticky side column on wide screens */
.toc{margin-block-end:var(--s-5)}
.toc__box{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-1)}
.toc__box > summary{display:flex;align-items:center;justify-content:space-between;min-block-size:var(--target);padding:8px 16px;
  font-weight:650;color:var(--text);list-style:none}
.toc__box > summary::-webkit-details-marker{display:none}
.toc__box > summary::after{content:"+";font-size:22px;line-height:1;color:var(--text-3);font-weight:400}
.toc__box[open] > summary::after{content:"−"}
.toc__list,.toc__list ol{list-style:none;margin:0;padding:0;max-inline-size:none}
.toc__list{padding:0 8px 12px;font-size:14.5px;line-height:1.45}
.toc__list ol{padding-inline-start:var(--s-4)}
.toc__list a{display:block;padding:7px 10px;border-radius:var(--r-xs);border-inline-start:2px solid transparent;color:var(--text-2);
  text-decoration:none}
.toc__list a:hover{background:var(--surface-2);color:var(--text)}
.toc__list a[aria-current="location"]{color:var(--brand);border-inline-start-color:var(--brand);font-weight:650;background:var(--brand-soft)}
@media (min-width:1080px){
  .post__layout{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:var(--s-7);align-items:start}
  .toc{position:sticky;inset-block-start:calc(var(--header-h) + 16px);max-block-size:calc(100vh - var(--header-h) - 32px);
    overflow-y:auto;overscroll-behavior:contain;margin-block-end:0}
  .toc__box{border:0;background:none}
  .toc__box > summary{padding-inline:10px;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);
    font-weight:700}
  html[lang="ar"] .toc__box > summary{text-transform:none;letter-spacing:0;font-size:13.5px}
  .toc__list{padding-inline:0}
}

/* the in-short box, the status callouts */
.takeaways{background:var(--brand-soft);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4) var(--s-5);
  max-inline-size:72ch}
.takeaways__title{font-size:17px;line-height:1.3;margin:0 0 var(--s-2)}
.takeaways ul{margin:0;padding-inline-start:1.3em;max-inline-size:none}
.takeaways li{margin-block:.4em;color:var(--text)}
.post__col > .callout{max-inline-size:72ch}

/* the body */
.prose{font-size:18px;line-height:1.75;max-inline-size:72ch;color:var(--text)}
html[lang="ar"] .prose{font-size:19.5px;line-height:1.95}
.prose > * + *{margin-block-start:0}
.prose p,.prose li,.prose blockquote{color:var(--text)}
.prose p{margin-block:0 var(--s-4)}
.prose h2{font-size:clamp(24px,2.4vw,31px);margin-block:var(--s-7) var(--s-3)}
.prose h3{font-size:clamp(19px,1.7vw,23px);margin-block:var(--s-6) var(--s-2)}
.prose h4{margin-block:var(--s-5) var(--s-2)}
.prose h2:first-child{margin-block-start:var(--s-5)}
.hlink{color:inherit;text-decoration:none}
.hlink:hover{color:inherit;text-decoration:none}
.hlink::after{content:"#";margin-inline-start:.4em;color:var(--text-3);font-weight:400;opacity:0;transition:opacity var(--dur-1) var(--ease)}
.hlink:hover::after,.hlink:focus-visible::after{opacity:1}
@media (hover:none){.hlink::after{opacity:.45}}
.prose ul,.prose ol{margin-block:0 var(--s-4);padding-inline-start:1.5em;max-inline-size:none}
.prose li{margin-block:.4em}
.prose li > ul,.prose li > ol{margin-block:.4em 0}
.prose blockquote{margin-block:var(--s-4);padding-inline-start:var(--s-4);border-inline-start:3px solid var(--brand);color:var(--text-2)}
.prose hr{border:0;border-block-start:1px solid var(--border);margin-block:var(--s-6)}
.prose pre.code{margin-block:var(--s-4);padding:var(--s-5) var(--s-4) var(--s-4);background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-sm);overflow-x:auto;position:relative;font-size:14.5px;line-height:1.6}
.prose pre.code code{background:none;border:0;padding:0}
.prose .tablewrap{margin-block:var(--s-4);max-inline-size:none}
.prose .tablewrap table{font-size:15px;min-inline-size:min(560px,100%)}
.prose img{display:block;max-inline-size:100%;block-size:auto;margin-block:var(--s-4);border-radius:var(--r-sm)}
.prose .ta-center{text-align:center}
.prose .ta-end{text-align:end}
.prose .faq{margin-block:var(--s-7) var(--s-5)}
.prose .faq h2{margin-block-start:0}
.prose .faq__a p{font-size:17px}
.prose a{overflow-wrap:anywhere}

/* sources, apps, author, related */
.sources,.post-apps,.authorbox{margin-block-start:var(--s-7)}
.sources h2,.post-apps h2{font-size:clamp(22px,2.2vw,28px);margin-block:0 var(--s-2)}
.sources__intro{margin:0 0 var(--s-3)}
.sources__list{margin:0;padding-inline-start:1.5em;max-inline-size:72ch}
.sources__list li{margin-block:var(--s-3);color:var(--text-2)}
.sources__list a{font-weight:600;overflow-wrap:anywhere}
.sources__line{display:flex;flex-wrap:wrap;gap:2px var(--s-3);font-size:14px;color:var(--text-3);margin-block-start:2px}
.sources__host{direction:ltr;unicode-bidi:isolate}
.post-apps .cgrid{margin-block-start:var(--s-3)}
.post-report{margin-block-start:var(--s-5);font-size:14.5px}
.authorbox{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-4) var(--s-5);background:var(--surface-1);max-inline-size:72ch}
.authorbox h2{font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin:0 0 var(--s-2)}
html[lang="ar"] .authorbox h2{text-transform:none;letter-spacing:0;font-size:15px}
.authorbox p{margin:0 0 var(--s-2)}
.authorbox__name{font-weight:700;font-size:18px}
.authorbox__name a{color:var(--text);text-decoration:none}
.authorbox__name a:hover{color:var(--brand);text-decoration:underline}
.related{margin-block-start:var(--s-7)}
.related h2{font-size:clamp(22px,2.2vw,28px);margin-block:0 var(--s-3)}

/* reading progress (blog.js adds it) */
.reading-progress{position:fixed;inset-block-start:0;inset-inline:0;block-size:3px;z-index:var(--z-sticky);pointer-events:none;
  background:transparent}
.reading-progress > span{display:block;block-size:100%;background:var(--brand);transform:scaleX(var(--p,0));transform-origin:left center}
html[dir="rtl"] .reading-progress > span{transform-origin:right center}
}

@media print{
  .toc,.byline__tool,.cta-band,.related,.pager,.reading-progress,.post-apps,.post-report,.blog-cats{display:none!important}
  .post__layout{display:block}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;overflow-wrap:anywhere}
  .hlink::after{display:none}
}

/* The blog digest box (R72, scripts/site/newsletter.py) and the newsletter pages */
.nl-box{margin-block:var(--s-6);max-inline-size:760px}
.nl-box h2{margin-block-start:0}
.nl-form .rcards{margin-block:var(--s-2)}
.nl-consent{margin-block:var(--s-2)}
.nl-privacy dt{font-weight:600;margin-block-start:var(--s-3)}
.nl-privacy dd{margin:0}
.nl-page{max-inline-size:640px}