/* GuestSpy — blog article styling.
   Additive: the GuestSpy theme already styles most of this; these rules fill the
   gaps and make the articles look right in any other theme too. */

.article, .entry-content, .post-content { --gsb-ink:#0F1B33; --gsb-ink2:#334155; --gsb-ink3:#64748B;
  --gsb-line:#E2E8F0; --gsb-paper:#F6F8FB; --gsb-teal:#0E9384; --gsb-teal50:#E8F7F4;
  --gsb-coral:#F2634A; --gsb-r:16px; }

/* ---------- figures ---------- */
.article figure, .entry-content figure.shot { margin:1.9rem 0; }
.article figure img, .entry-content figure.shot img { max-width:100%; height:auto; display:block; }
.article figcaption, .entry-content figure.shot figcaption {
  font-size:.86rem; line-height:1.5; color:var(--gsb-ink3); text-align:left;
  padding:.7rem .1rem 0; }

/* Tall phone / settings screenshots: keep them a sensible size and centred,
   never full-bleed, so they don't dominate the column. */
.article .shot--phone, .entry-content .shot--phone { text-align:center; }
.article .shot--phone img, .entry-content .shot--phone img {
  max-width:330px; width:100%; margin-inline:auto; border-radius:0; }
.article .shot--phone figcaption, .entry-content .shot--phone figcaption {
  text-align:center; max-width:480px; margin-inline:auto; }

/* Wide graphics (panel, charts, tables, diagrams) */
.article .shot--art img, .entry-content .shot--art img {
  border-radius:var(--gsb-r); box-shadow:0 2px 4px rgba(15,27,51,.05),0 12px 30px rgba(15,27,51,.08); }

/* ---------- fallbacks for non-GuestSpy themes ---------- */
.entry-content .lede, .post-content .lede { font-size:1.15rem; line-height:1.65; color:var(--gsb-ink2); }

.entry-content .toc, .post-content .toc {
  background:var(--gsb-paper); border:1px solid var(--gsb-line); border-radius:var(--gsb-r);
  padding:1.2rem 1.5rem; margin:1.6rem 0; }
.entry-content .toc strong, .post-content .toc strong {
  display:block; margin-bottom:.6rem; font-size:.85rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--gsb-ink3); }
.entry-content .toc ul, .post-content .toc ul { margin:0; padding-left:0; list-style:none; columns:2; column-gap:1.5rem; }
.entry-content .toc li, .post-content .toc li { margin:.3rem 0; break-inside:avoid; }

.entry-content .note-transparency, .post-content .note-transparency {
  background:var(--gsb-teal50); border-left:4px solid var(--gsb-teal); border-radius:10px;
  padding:1rem 1.25rem; margin:1.6rem 0; font-size:.97rem; color:var(--gsb-ink2); }
.entry-content .note-transparency b, .post-content .note-transparency b { color:var(--gsb-ink); }

.entry-content .table-wrap, .post-content .table-wrap { overflow-x:auto; margin:1.6rem 0; }
.entry-content table.data, .post-content table.data { width:100%; border-collapse:collapse; font-size:.95rem; }
.entry-content table.data th, .post-content table.data th {
  background:var(--gsb-ink); color:#fff; text-align:left; padding:.7rem .9rem; font-size:.85rem; }
.entry-content table.data td, .post-content table.data td {
  padding:.7rem .9rem; border-top:1px solid var(--gsb-line); vertical-align:top; }
.entry-content table.data tr:nth-child(even) td, .post-content table.data tr:nth-child(even) td { background:var(--gsb-paper); }

.entry-content .grid, .post-content .grid { display:grid; gap:1rem; margin:1.5rem 0; }
.entry-content .grid-2, .post-content .grid-2 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.entry-content .grid-3, .post-content .grid-3 { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.entry-content .card, .post-content .card {
  background:#fff; border:1px solid var(--gsb-line); border-radius:var(--gsb-r); padding:1.2rem 1.3rem; }
.entry-content .card h3, .post-content .card h3 { margin:0 0 .4rem; font-size:1.05rem; }
.entry-content .card p, .post-content .card p { margin:0; font-size:.95rem; color:var(--gsb-ink2); }

.entry-content .faq details, .post-content .faq details {
  background:#fff; border:1px solid var(--gsb-line); border-radius:12px; margin:.65rem 0; padding:0 1.3rem; }
.entry-content .faq summary, .post-content .faq summary {
  cursor:pointer; font-weight:700; padding:1.05rem 0; list-style:none; color:var(--gsb-ink); }
.entry-content .faq summary::-webkit-details-marker, .post-content .faq summary::-webkit-details-marker { display:none; }
.entry-content .faq details[open], .post-content .faq details[open] { padding-bottom:.9rem; }

/* ---------- shared polish ---------- */
.article .faq details, .entry-content .faq details { break-inside:avoid; }
.article ol > li, .article ul > li,
.entry-content ol > li, .entry-content ul > li { margin:.45rem 0; }
.article h2, .entry-content h2 { scroll-margin-top:90px; }
.article h3, .entry-content h3 { scroll-margin-top:90px; }

@media (max-width:640px){
  .entry-content .toc ul, .post-content .toc ul { columns:1; }
  .article .shot--phone img, .entry-content .shot--phone img { max-width:280px; }
}