/* soldbylsg.com blog layout: the top answer stays open, every section after it folds into a clean list.
   Loaded by every post that tools/builder/tidy_layout.py has run on. Uses each post's own color tokens. */

/* Section list header */
.sec-list{margin:48px 0 8px;border-top:2px solid var(--ink)}
.sec-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 6px}
.sec-list-label{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.sec-toggle-all{font:500 13px "IBM Plex Sans",system-ui,sans-serif;color:var(--accent-2);
  background:none;border:1px solid var(--rule);border-radius:999px;padding:6px 14px;cursor:pointer}
.sec-toggle-all:hover{border-color:var(--accent-2)}

/* One section */
details.sec{border-bottom:1px solid var(--rule)}
details.sec > summary,
details.faq-item > summary,
details.sources-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:16px;-webkit-tap-highlight-color:transparent}
details.sec > summary::-webkit-details-marker,
details.faq-item > summary::-webkit-details-marker,
details.sources-fold > summary::-webkit-details-marker{display:none}
details.sec > summary{padding:20px 0}
details.sec > summary h2{margin:0;font-size:clamp(1.15rem,2.8vw,1.4rem);line-height:1.3}
details.sec > summary:hover h2{color:var(--accent)}
.sec-body{padding:0 0 28px}
.sec-body > :first-child{margin-top:0}
.sec-body h2{margin-top:32px}

/* Plus / minus marker */
details.sec > summary::after,
details.faq-item > summary::after,
details.sources-fold > summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--rule);
  background:
    linear-gradient(var(--accent-2),var(--accent-2)) center/11px 1.5px no-repeat,
    linear-gradient(var(--accent-2),var(--accent-2)) center/1.5px 11px no-repeat;
  transition:transform .2s ease}
details[open].sec > summary::after,
details[open].faq-item > summary::after,
details[open].sources-fold > summary::after{
  background:linear-gradient(var(--accent-2),var(--accent-2)) center/11px 1.5px no-repeat;
  transform:rotate(180deg)}

/* Questions people ask */
.faq details.faq-item{border-bottom:1px solid var(--rule);padding:0;margin:0;background:none}
.faq details.faq-item:first-of-type{border-top:1px solid var(--rule)}
.faq details.faq-item > summary{padding:16px 0}
.faq details.faq-item > summary h3{margin:0;font-size:1.02rem;line-height:1.4}
.faq details.faq-item > summary::after{width:24px;height:24px}
.faq .faq-body{padding:0 40px 18px 0;color:var(--ink-2)}
.faq .faq-body > :last-child{margin-bottom:0}

/* Sources tucked away */
details.sources-fold > summary{padding:14px 0}
details.sources-fold > summary h2{margin:0;font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
details.sources-fold > summary::after{width:22px;height:22px}
details.sources-fold{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:40px}
details.sources-fold ol{font-size:14px;padding-bottom:12px}

@media (prefers-reduced-motion:reduce){details > summary::after{transition:none}}
@media print{details.sec,details.faq-item,details.sources-fold{display:block}
  details > summary::after,.sec-toggle-all{display:none}}