/* Five West blog post UI (blog posts only). Linked from every /blog/*.html post,
   just before /assets/fw-offwhite.css. Change this one file to restyle every post;
   bump ?v= in the posts' link tag when you do (ui/transform.py swaps it).
   Posts keep their own table CSS in a <style> inside <body>, which loads AFTER this
   file, so the phone-table rules below carry one extra class (.tscroll) to win. v20261011 */

/* ---- 1. Comparison tables (table.cmp inside div.tscroll) ---------------------------
   Desktop: some tables carried an inline min-width (up to 640px) wider than the
   608px text column, so the last column was cut off. Let them fit the column. */
.post-body table.cmp{min-width:0!important}
@media (min-width:641px){
  .post-body table.cmp:has(thead th:nth-child(4)){font-size:14px}
  .post-body table.cmp:has(thead th:nth-child(4)) th,
  .post-body table.cmp:has(thead th:nth-child(4)) td{padding:11px 10px}
}

/* Phones: each row becomes a card. Column names come from data-label on each cell. */
@media (max-width:640px){
  .post-body div.tscroll{overflow:visible}
  .post-body .tscroll table.cmp,
  .post-body .tscroll table.cmp tbody,
  .post-body .tscroll table.cmp tr,
  .post-body .tscroll table.cmp td{display:block;width:100%}
  .post-body .tscroll table.cmp{border:0;border-radius:0;background:none;overflow:visible;margin:22px 0 8px;font-size:15px}
  .post-body .tscroll table.cmp thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .post-body .tscroll table.cmp tbody tr{background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:0 0 8px}
  .post-body .tscroll table.cmp td{border-top:1px solid var(--line);padding:8px 14px;font-size:14.5px;line-height:1.45}
  .post-body .tscroll table.cmp td[data-label]::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px;line-height:1.35}
  .post-body .tscroll table.cmp td:first-child{border-top:0;font-weight:700;color:var(--ink);padding:10px 14px}
  .post-body .tscroll table.cmp td:first-child::before{content:none}
}

/* ---- 2. "Keep reading" ---------------------------------------------------------------
   Posts built from the newer template had the card markup but none of the section CSS,
   so the links ran together as one underlined paragraph. Same look as the older posts. */
section.related{margin-top:60px;padding-top:28px;border-top:1px solid var(--line)}
section.related h2{font-size:clamp(21px,2.8vw,27px);margin:0 0 4px}
section.related > p:not(.toolrow){font-size:14.5px;color:var(--ink-dim);margin:0 0 20px}
section.related .rl{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
section.related .rl a{display:block;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:16px 19px;text-decoration:none;color:inherit;font-weight:400;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
section.related .rl a:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--line-2);color:inherit}
section.related .rl .rk{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--clay-deep)}
section.related .rl .rt{display:block;font-family:var(--serif);font-size:17.5px;font-weight:600;color:var(--ink);margin-top:6px;line-height:1.25}
section.related .rl .rd{display:block;font-size:14px;color:var(--ink-dim);margin-top:6px;line-height:1.5}
section.related .rl a:hover .rt{color:var(--clay-deep)}
@media (max-width:699px){section.related .rl{grid-template-columns:1fr}}

/* ---- 3. "On the site" links as small pills --------------------------------------------- */
.post-body p.toolrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.post-body p.toolrow .toolrow-lab{flex-basis:100%;margin:0 0 2px}
.post-body p.toolrow a{display:inline-block;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:var(--card,#fff);font-size:13.5px;line-height:1.2;text-decoration:none}
.post-body p.toolrow a:hover{border-color:var(--clay-deep)}

/* ---- 4. Sources: collapsed by default (aside.srcbox.src-fold > details) ---------------
   The "verify current figures" line (.sv) stays outside the fold, always visible. */
.srcbox.src-fold{padding:0}
.srcbox.src-fold > details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:18px 24px;-webkit-user-select:none;user-select:none}
.srcbox.src-fold > details > summary::-webkit-details-marker{display:none}
.srcbox.src-fold > details > summary h3{margin:0}
.srcbox.src-fold .src-n{font-size:13.5px;color:var(--ink-dim)}
.srcbox.src-fold > details > summary::after{content:"+";content:"+" / "";margin-left:auto;font-size:22px;font-weight:400;line-height:1;color:var(--clay-deep)}
.srcbox.src-fold > details[open] > summary::after{content:"\2212";content:"\2212" / ""}
.srcbox.src-fold > details > summary:focus-visible{outline:2px solid var(--clay-deep);outline-offset:-2px;border-radius:10px}
.srcbox.src-fold > details > ol,
.srcbox.src-fold > details > ul{margin:0 24px 0 46px;padding:0;line-height:1.6}
.srcbox.src-fold > details > ol li,
.srcbox.src-fold > details > ul li{margin:0 0 8px;font-size:14.5px}
.srcbox.src-fold > details > p{margin:0 24px 20px;font-size:14px;line-height:1.6}
.srcbox.src-fold > details[open]{padding-bottom:6px}
.srcbox.src-fold > .sv{display:block;margin:0 24px 18px;font-size:13.5px;line-height:1.5;color:var(--ink-dim)}
.srcbox.src-fold a{overflow-wrap:anywhere}
@media (max-width:640px){
  .srcbox.src-fold > details > summary{padding:16px 18px}
  .srcbox.src-fold > details > ol{margin:0 18px 0 38px}
  .srcbox.src-fold > details > ol li,
  .srcbox.src-fold > details > ul li{font-size:14px}
  .srcbox.src-fold > details > p{margin:0 18px 18px}
  .srcbox.src-fold > .sv{margin:0 18px 16px}
}
/* Print the sources open. (Two separate rules on purpose: a browser that doesn't know
   ::details-content drops only that rule.) */
@media print{.srcbox.src-fold > details::details-content{content-visibility:visible}}
@media print{.srcbox.src-fold > details > summary::after{content:none}}

/* ---- 5. Spacing around the closing call-to-action ------------------------------------ */
.post-cta{margin-bottom:40px}