/* dlg-skin.css -- shared stylesheet for the retrofitted blog-post layout.
   Referenced by every post index.html via <link rel="stylesheet">, so this
   file ships once and is cached once instead of being repeated inline on
   2,145 pages. Scoped entirely under .dlg; safe to load anywhere.
   Companion to the inline .dlg-* rules on /best-data-labeling-companies/
   (that page predates this file and keeps its own inline copy -- not
   touched here). RTL support keys off <html dir="rtl">, present on the
   Arabic build. */
.dlg{
  --dlg-accent:#007EA7; --dlg-accent-dark:#00445B; --dlg-accent-soft:#e6f2f7;
  --dlg-ink:#1c1917; --dlg-body:#57534e; --dlg-muted:#78716c; --dlg-faint:#a8a29e;
  --dlg-line:#e7e5e4; --dlg-line-soft:#f0efee; --dlg-bg-soft:#fafaf9;
  width:min(1180px,calc(100vw - 2rem)); max-width:none; margin-inline:auto;
  font-size:16px; line-height:1.65; color:var(--dlg-body); box-sizing:border-box;
}
.dlg *,.dlg *::before,.dlg *::after{box-sizing:border-box;}
.dlg a{color:var(--dlg-accent-dark);}
.dlg a:hover{color:var(--dlg-accent);}

/* ---------- hero (wraps the post's own existing entry-header) ---------- */
.dlg-hero-wrap{width:min(1180px,calc(100vw - 2rem)); max-width:none; margin-inline:auto;
  padding-bottom:1.5rem; border-bottom:1px solid var(--dlg-line); margin-bottom:2rem;}
.dlg-hero.entry-header{padding:0;}
.dlg-hero .page-title{font-size:clamp(1.7rem,1rem + 2.2vw,2.5rem); line-height:1.15;
  letter-spacing:-.01em; font-weight:500; color:var(--dlg-ink); margin:0 0 1rem; max-width:56rem;}
.dlg-hero .entry-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:.875rem; color:var(--dlg-muted); list-style:none; padding:0; margin:0;}
.dlg-hero .entry-meta li{display:inline-flex; align-items:center; gap:.5rem;}
.dlg-hero .meta-author img{border-radius:9999px;}

/* ---------- two-column shell ---------- */
.dlg-cols{display:grid; grid-template-columns:220px minmax(0,1fr); gap:3.5rem; align-items:start;}
.dlg-rail{position:sticky; top:6rem; align-self:start; padding-bottom:2rem;}
.dlg-rail-title{font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dlg-ink); margin:0 0 1.1rem;}
.dlg-toc{border-left:1px solid var(--dlg-line); padding-left:1rem; display:block;}
.dlg-toc a{display:block; padding:.375rem 0; font-size:.8125rem; line-height:1.5;
  color:var(--dlg-faint); text-decoration:none;}
.dlg-toc a:hover{color:var(--dlg-body);}
.dlg-toc-mobile{display:none;}

/* ---------- prose ---------- */
.dlg-body{max-width:52rem;}
.dlg-body h2{font-size:1.4rem; line-height:1.3; font-weight:600; color:var(--dlg-ink);
  margin:2.25rem 0 1rem; scroll-margin-top:6rem;}
.dlg-body h3{font-size:1.15rem; line-height:1.35; font-weight:600; color:var(--dlg-ink);
  margin:1.75rem 0 .75rem; scroll-margin-top:6rem;}
.dlg-body p{margin:0 0 1.1rem;}
.dlg-body table{width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.9rem;}
.dlg-body table th,.dlg-body table td{border:1px solid var(--dlg-line); padding:.5rem .75rem; text-align:left;}
.dlg-body table thead{background:var(--dlg-accent-soft);}

/* ---------- FAQ ---------- */
.dlg-faq{border:1px solid var(--dlg-line); border-radius:.75rem; background:#fff;
  overflow:hidden; margin:1.5rem 0 2rem;}
.dlg-faq details{border-bottom:1px solid var(--dlg-line);}
.dlg-faq details:last-child{border-bottom:0;}
.dlg-faq summary{list-style:none; cursor:pointer; padding:1rem 1.5rem; font-size:.9rem;
  font-weight:600; color:var(--dlg-ink); display:flex; align-items:flex-start;
  justify-content:space-between; gap:1rem;}
.dlg-faq summary::-webkit-details-marker{display:none;}
.dlg-faq summary::after{content:"+"; flex:0 0 auto; color:var(--dlg-muted); font-weight:400; font-size:1.1rem;}
.dlg-faq details[open] summary::after{content:"\2212";}
.dlg-faq details>p{padding:0 1.5rem 1.1rem; font-size:.9rem; line-height:1.6; color:var(--dlg-body); margin:0;}
.dlg-faq details>p+p{padding-top:0;}

/* ---------- related posts (restyled YARPP block) ---------- */
.dlg-related{margin:2rem 0;}
.dlg-related-title{font-size:1rem; font-weight:600; color:var(--dlg-ink); margin:0 0 .75rem;}
.dlg-related-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem;}
.dlg-related-list li{border:1px solid var(--dlg-line); border-radius:.5rem; padding:.75rem 1rem;}
.dlg-related-list a{font-size:.9rem; font-weight:500; text-decoration:none; color:var(--dlg-ink);}
.dlg-related-list a:hover{color:var(--dlg-accent-dark); text-decoration:underline;}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .dlg-cols{grid-template-columns:minmax(0,1fr); gap:0;}
  .dlg-rail{position:static; padding-bottom:0; margin-bottom:1.5rem;}
  .dlg-toc-mobile{display:block; border:1px solid var(--dlg-line); border-radius:.75rem; background:#fff; overflow:hidden;}
  .dlg-toc-mobile>summary{list-style:none; cursor:pointer; padding:.75rem 1.25rem; font-size:.8125rem;
    font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dlg-ink);
    display:flex; align-items:center; justify-content:space-between;}
  .dlg-toc-mobile>summary::-webkit-details-marker{display:none;}
  .dlg-toc-mobile>summary::after{content:"+"; color:var(--dlg-muted); font-weight:400;}
  .dlg-toc-mobile[open]>summary::after{content:"\2212";}
  .dlg-toc-mobile .dlg-toc{border-left:0; padding:0 1.25rem 1rem;}
  .dlg-rail-title,.dlg-toc-desktop{display:none;}
}

/* ---------- RTL (Arabic build: <html dir="rtl">) ---------- */
html[dir="rtl"] .dlg-toc{border-left:0; border-right:1px solid var(--dlg-line); padding-left:0; padding-right:1rem;}