/* Task 842: blog styles. Loaded only by /blog/ pages (deploy.ps1 adds the link). Uses the site.css tokens. */
.post{max-width:820px;margin:0 auto;padding:36px 24px 56px}
.post-head h1{font-size:46px;line-height:1.08;margin:14px 0 10px}
.post-head .lead{font-size:19px;color:var(--ink2);margin:0 0 20px}
.post-back{display:inline-block;font-weight:600;color:var(--terra);text-decoration:none;margin-bottom:12px}
.post-back:hover{text-decoration:underline}
.post-img{margin:0 0 8px}
.post-img img{width:100%;height:auto;display:block;border:3px solid var(--line);border-radius:var(--r-lg);box-shadow:6px 6px 0 var(--terra)}
.post-img figcaption{font-size:13px;color:var(--ink2);margin-top:10px}
.post-img figcaption a{color:inherit}
.post-body{max-width:none}
.post-body p{line-height:1.6}
.post-body .tldr{background:var(--cream2);border:2.5px solid var(--line);border-radius:18px;padding:18px 22px;margin:24px 0}
.post-body .tldr h2{margin:0 0 12px;font-size:22px}
.post-body .src{font-size:14px}
.post-body .src li{margin-bottom:4px}
.post-body .unv{font-size:13px;font-weight:600;color:var(--terra)}
.post-body table.bl-t{border-collapse:collapse;width:100%;font-size:15px;margin:12px 0}
.post-body .bl-t th,.post-body .bl-t td{border-bottom:1px solid var(--line2);padding:7px 8px;text-align:left}
.post-body .bl-t td.n,.post-body .bl-t th.n{text-align:right;font-variant-numeric:tabular-nums}
.post-disclaimer{margin-top:36px}
.bl-helps{margin:32px 0 8px}
.bl-helps h2{margin:0 0 8px;font-size:22px}
.bl-helps p{margin:0}

/* Index cards */
.bl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;max-width:1100px;margin:0 auto}
.bl-card{display:flex;flex-direction:column;background:#fff;border:2.5px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* Task 848: links needed two clicks/taps. The hover lift (transform + transition) moved the card under the pointer and, on touch,
   made the first tap a hover. Now: no transform, no hover state on touch screens, and the children never take the click. */
.bl-card:focus-visible{box-shadow:6px 6px 0 var(--terra)}
@media (hover:hover) and (pointer:fine){.bl-card:hover{box-shadow:6px 6px 0 var(--terra)}}
.bl-card *{pointer-events:none}
.bl-card img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block;border-bottom:2.5px solid var(--line)}
.bl-card-body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.bl-card time{font-size:13px;color:var(--ink2)}
.bl-card-t{font-family:'DM Serif Display',serif;font-size:24px;line-height:1.15}
.bl-card-s{color:var(--ink2);font-size:15px}
.bl-more{font-weight:700;color:var(--terra)}

/* Calculators */
.bl-calc{border:3px solid var(--line);border-radius:var(--r-lg);background:var(--cream2);padding:22px;box-shadow:8px 8px 0 var(--indigo);margin:28px 0}
.bl-calc h3{margin:0 0 14px;font-size:24px}
.bl-ins{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 22px;margin-bottom:16px}
.bl-s{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink2)}
.bl-s output{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.bl-s input[type=range]{width:100%;accent-color:var(--terra)}
.bl-out{background:#fff;border:2px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.bl-out p{margin:0 0 6px;color:var(--ink)}
.bl-out .big{font-size:22px;font-weight:800}
.bl-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink2);margin-bottom:6px}
.bl-legend i{display:inline-block;width:14px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}
.bl-chart{color:var(--ink2)}
.bl-chart svg{width:100%;height:auto;display:block}
.bl-note{font-size:13px;color:var(--ink2);margin:10px 0 0}
.bl-grid{stroke:var(--line2);stroke-opacity:.25}
.bl-ax{fill:currentColor;font-size:12px;font-family:'Work Sans',system-ui,sans-serif}
path.bl-l{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.bl-mark{stroke:var(--ink2);stroke-dasharray:5 4;stroke-width:1.5}
.c1{stroke:var(--terra);background:var(--terra);fill:var(--terra)}
.c2{stroke:var(--indigo);background:var(--indigo);fill:var(--indigo)}
.c3{stroke:var(--ochre);background:var(--ochre);fill:var(--ochre)}
.c4{stroke:#1E7A46;background:#1E7A46;fill:#1E7A46}
.bl-bars{display:grid;gap:12px}
.bl-bar h4{margin:0 0 4px;font-size:15px}
.bl-bar .trk{display:flex;height:22px;border:2px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.bl-bar .trk span{display:block;height:100%}
.bl-bar p{margin:4px 0 0;font-size:14px;color:var(--ink2)}
.bl-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.bl-cols div{background:#fff;border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.bl-cols b{display:block;font-size:20px}
.bl-cols small{color:var(--ink2)}
.bl-cols .best{box-shadow:4px 4px 0 var(--ochre)}
@media (max-width:620px){.post{padding:24px 16px 40px}.post-head h1{font-size:34px}.bl-calc{padding:14px;box-shadow:4px 4px 0 var(--indigo)}}
[data-theme="dark"] .bl-card,[data-theme="dark"] .bl-out,[data-theme="dark"] .bl-cols div,[data-theme="dark"] .bl-bar .trk{background:var(--surface,#131A27);color:var(--ink)}
[data-theme="dark"] .bl-calc,[data-theme="dark"] .post-body .tldr{background:#0F1520}
[data-theme="dark"] .c4{stroke:#4ADE80;background:#4ADE80;fill:#4ADE80}