/* PiHunter — content layer.
   Styling that exists ONLY to support long-form article content: tables,
   in-article FAQ, source lists and callouts. It defines no brand identity,
   no colour of its own and no layout: every value derives from the tokens
   already declared in styles.css. The design team can restyle or delete this
   file wholesale without affecting anything else. */

/* ---- tables inside articles ---- */
.prose .tbl-wrap{
  margin:1.8rem 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-2); border-radius:12px; background:var(--bg-1);
}
.prose table{
  width:100%; min-width:32rem; border-collapse:collapse;
  font-size:.95rem; text-align:start;
}
.prose thead th{
  background:var(--accent-soft); color:var(--ink);
  font-weight:650; font-size:.9rem; white-space:nowrap;
  padding:12px 14px; border-bottom:1px solid var(--line-2); text-align:start;
}
.prose tbody td{
  padding:12px 14px; border-bottom:1px solid var(--line);
  color:var(--muted); vertical-align:top; line-height:1.75;
}
.prose tbody tr:last-child td{ border-bottom:0; }
.prose tbody th{
  padding:12px 14px; border-bottom:1px solid var(--line);
  color:var(--ink); font-weight:600; text-align:start; vertical-align:top;
}

/* ---- callouts ---- */
.prose .note{
  margin:1.7rem 0; padding:16px 20px; border-radius:12px;
  background:var(--bg-1); border:1px solid var(--line-2);
  border-inline-start:3px solid var(--accent);
  color:var(--muted); line-height:1.85; font-size:.99rem;
}
.prose .note > b:first-child,
.prose .note > strong:first-child{ color:var(--ink); }
.prose .note p{ margin:0; color:inherit; font-size:inherit; }
.prose .note p + p{ margin-top:.7rem; }
.prose .note--warn{ border-inline-start-color:#fb7185; }
.prose .note--warn > b:first-child{ color:#fb7185; }

/* ---- in-article FAQ ---- */
.prose .qa{ margin:1.6rem 0 2rem; border-top:1px solid var(--line); }
.prose .qa details{
  border-bottom:1px solid var(--line); background:none;
}
.prose .qa summary{
  cursor:pointer; list-style:none; padding:18px 0;
  color:var(--ink); font-weight:600; font-size:1.05rem; line-height:1.7;
  display:flex; align-items:flex-start; gap:14px;
}
.prose .qa summary::-webkit-details-marker{ display:none; }
.prose .qa summary::after{
  content:"+"; flex:none; margin-inline-start:auto;
  width:26px; height:26px; border:1px solid var(--line-2); border-radius:8px;
  display:grid; place-items:center; color:var(--accent);
  font-family:var(--font-mono); font-weight:400; transition:.2s;
}
.prose .qa details[open] summary::after{
  content:"−"; background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
}
.prose .qa details > div{
  padding:0 0 20px; color:var(--muted); line-height:1.9; font-size:1rem;
}
.prose .qa details > div > p{ margin:0 0 .8rem; }
.prose .qa details > div > p:last-child{ margin-bottom:0; }

/* ---- sources ---- */
.prose .srcs{
  margin:2.4rem 0 0; padding:20px 22px; border-radius:12px;
  background:var(--bg-1); border:1px solid var(--line-2);
}
.prose .srcs h3{ margin:0 0 .9rem; font-size:1.02rem; color:var(--ink); }
.prose .srcs ol{
  margin:0; padding-inline-start:1.3em; display:flex; flex-direction:column; gap:.55em;
  color:var(--muted); font-size:.93rem;
}
.prose .srcs li{ line-height:1.75; }
.prose .srcs li::marker{ color:var(--accent); }
.prose .srcs a{ word-break:break-word; }

/* ---- key-takeaways box ---- */
.prose .keys{
  margin:0 0 2rem; padding:20px 22px; border-radius:12px;
  background:var(--accent-soft); border:1px solid var(--accent-line);
}
.prose .keys h3{ margin:0 0 .8rem; font-size:1.02rem; color:var(--ink); }
.prose .keys ul{ margin:0; }
.prose .keys li{ color:var(--muted); }

/* ---- step list ---- */
.prose ol{
  margin:0 0 1.3rem; padding-inline-start:1.3em;
  color:var(--muted); display:flex; flex-direction:column; gap:.6em;
}
.prose ol li{ line-height:1.9; }
.prose ol li::marker{ color:var(--accent); font-weight:600; }

/* ---- long code blocks stay readable on phones ---- */
.prose pre{ max-width:100%; }
.prose :not(pre) > code{ overflow-wrap:anywhere; }

@media (max-width:560px){
  .prose .tbl-wrap{ border-radius:10px; }
  .prose table{ font-size:.9rem; min-width:26rem; }
  .prose thead th,.prose tbody td,.prose tbody th{ padding:10px 12px; }
  .prose .srcs,.prose .keys,.prose .note{ padding-inline:16px; }
}

/* ================================================================
   MOBILE BREAKAGE REPAIR — added 1405/05 (2026-08)
   Repair only: no colour, type-scale or layout-design decisions.
   Safe to delete together with the rest of this file.
   ================================================================ */

/* The author chip printed the role and the review date with no separator:
   «کارشناس وب و موبایل» ran straight into «بازبینی: …». The date <span> is a
   sibling text run inside the same line, so give it its own separator+gap. */
.author-chip span{ margin-inline-start:.5em; }
.author-chip span::before{
  content:"·"; margin-inline-end:.5em; color:var(--line-2);
}

/* `1fr` carries an automatic min-content minimum, so a wide table (min-width:
   26rem) inside .tbl-wrap forced the single-column article grid to 418px in a
   390px viewport and pushed the whole article off the start edge.
   minmax(0,1fr) lets the column shrink; the table keeps scrolling in .tbl-wrap. */
@media (max-width:860px){
  .article-layout{ grid-template-columns:minmax(0,1fr); }
}