/* A blog post's visuals (App\Marketing\BlogBlocks, resources/views/blog): its tables, blocks and illustrations, and their
   motion. Loaded on a post after app.css. Motion only starts once js/blog.js marks the post (.blog-js) and never with
   reduced motion; without either, everything shows at its final state. */

/* Tables in a post's Markdown */
.prose table{width:100%;margin:22px 0 0;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15.5px;line-height:1.5;background:var(--surface)}
.prose th,.prose td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line-soft)}
.prose thead th{border-top:0;background:var(--paper);color:var(--muted);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.prose tbody tr:first-child td{border-top:0}
.prose td:first-child{font-weight:600}
@media (max-width:640px){.prose table{display:block;overflow-x:auto}}

/* Every block */
.prose .bb{margin:30px 0 0}
.bb-title{margin:0 0 12px;font:600 15px/1.4 var(--body);color:var(--ink)}
.bb-source{margin:10px 0 0;color:var(--subtle);font-size:13.5px;line-height:1.5}
.bb-source a{color:inherit}

/* Big figures */
.bb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.bb-stat{display:flex;flex-direction:column;gap:4px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.bb-stat-value{font:560 clamp(34px,4.4vw,44px)/1 var(--display);letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.bb-stat-value.is-long{font-size:clamp(26px,3.2vw,32px);line-height:1.1}
.bb-stat-label{font-size:15.5px;line-height:1.45;color:var(--ink)}
.bb-stat-note{color:var(--subtle);font-size:13px;line-height:1.45}

/* Bar chart */
.bb-bars{padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.bb-bars-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.bb-bars-list li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) auto;align-items:center;gap:12px;margin:0}
.bb-bar-label{font-size:15px;line-height:1.35}
.bb-bar-track{position:relative;height:14px;border-radius:999px;background:var(--paper)}
.bb-bar{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#E7703F,var(--brand))}
.bb-bar-value{min-width:60px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:560px){.bb-bars-list li{grid-template-columns:minmax(0,1fr) auto}.bb-bar-track{grid-column:1/-1;grid-row:2}}

/* Cards */
.bb-cards{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
@media (max-width:640px){.bb-cards{grid-template-columns:1fr}}
.prose .bb-cards li{margin:0}
.bb-card{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.bb-card-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:6px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.prose .bb-card h3{margin:0;font:600 17px/1.3 var(--body)}
.prose .bb-card p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.prose .bb-card .bb-card-note{margin-top:auto;padding-top:8px;color:var(--ink);font-weight:600}

/* Steps */
.bb-steps{position:relative;display:grid;gap:4px;margin:0;padding:0;list-style:none}
.bb-steps::before{content:"";position:absolute;top:18px;bottom:18px;left:17px;width:2px;background:var(--line)}
.prose .bb-step{position:relative;display:flex;gap:16px;margin:0;padding:12px 0}
.bb-step-n{position:relative;z-index:1;display:grid;flex:none;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:15px;box-shadow:0 0 0 5px var(--paper)}
.prose .bb-step h3{margin:2px 0 4px;font:600 18px/1.3 var(--body)}
.prose .bb-step p{margin:0;font-size:16px;line-height:1.6}
.prose .bb-step .bb-where{display:inline-block;margin:0 0 4px;padding:2px 9px;border-radius:999px;background:var(--chip);color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.prose .bb-step .bb-where.is-state{background:#E0EAF5;color:#2F5D8A}
.prose .bb-step .bb-where.is-irs{background:#ECE5F7;color:#6A45A8}
.prose .bb-step .bb-where.is-local{background:#FBEBD0;color:#94600F}
.prose .bb-step .bb-where.is-insurer{background:#DDF0EA;color:#1F7A66}
.prose .bb-step .bb-where.is-bank{background:#E8EED9;color:#56762B}

/* Checklist */
.bb-checklist{padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.bb-checklist-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.bb-checklist-count{margin:0 0 12px;color:var(--muted);font-size:14px}
.bb-checklist ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.prose .bb-checklist li{margin:0}
.bb-checklist label{display:flex;align-items:flex-start;gap:12px;padding:8px 6px;border-radius:10px;cursor:pointer;font-size:16px;line-height:1.5}
.bb-checklist label:hover{background:var(--paper)}
.bb-checklist input{flex:none;width:20px;height:20px;margin-top:3px;accent-color:var(--ok)}
.bb-checklist input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(26,26,23,.3)}
.prose .bb-checklist-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 0;color:var(--subtle);font-size:13px}
.bb-checklist-clear{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font:600 13px var(--body);cursor:pointer}

/* Callout */
.bb-callout{display:flex;gap:14px;padding:16px 18px;border-radius:16px;background:#DDF0EA;color:var(--ink);font-size:16.5px;line-height:1.6}
.bb-callout.is-note{background:#E0EAF5}
.bb-callout.is-warning{background:#FBEBD0}
.bb-callout-icon{display:grid;flex:none;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.7);color:#1F7A66}
.bb-callout.is-note .bb-callout-icon{color:#2F5D8A}
.bb-callout.is-warning .bb-callout-icon{color:#94600F}

/* Illustration */
.bb-figure{margin-left:0;margin-right:0}
.bb-figure-art{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:18px;background:#F3EEE3}
.bb-figure-art .ill{position:absolute;inset:0;width:100%;height:100%}
.bb-figure figcaption{margin-top:10px;color:var(--subtle);font-size:14px;text-align:center}

/* Motion: things come in as they scroll into view (js/blog.js adds .blog-js and .is-in) */
@media (prefers-reduced-motion:no-preference){
  .blog-js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .blog-js [data-reveal].is-in{opacity:1;transform:none}
  .blog-js .bb-bars .bb-bar{width:0;transition:width 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 90ms + .15s)}
  .blog-js .bb-bars.is-in .bb-bar{width:var(--w)}
  .blog-js .bb-cards .bb-card{opacity:0;transform:translateY(12px);transition:opacity .5s ease calc(var(--i,0) * 80ms),transform .5s ease calc(var(--i,0) * 80ms)}
  .blog-js .bb-cards.is-in .bb-card{opacity:1;transform:none}
  .blog-js .bb-cards{opacity:1;transform:none}

  /* Illustrations, wherever they're drawn on a post */
  .ill-spin{transform-box:fill-box;transform-origin:center;animation:ill-spin 1.6s linear infinite}
  .ill-bob{animation:ill-bob 1.2s ease-in-out infinite}
  .ill-sway{transform-box:fill-box;transform-origin:bottom center;animation:ill-sway 3.2s ease-in-out infinite}
  .ill-sway-2{animation-delay:-1.4s}
  .ill-float{animation:ill-float 4s ease-in-out infinite}
  .ill-float-slow{animation:ill-float 6s ease-in-out infinite}
  .ill-twinkle{transform-box:fill-box;transform-origin:center;animation:ill-twinkle 2.4s ease-in-out infinite}
  .ill-twinkle-2{animation-delay:-.8s}
  .ill-twinkle-3{animation-delay:-1.6s}
  .ill-clip{animation:ill-clip 1.6s ease-out infinite}
  .ill-bubbles{animation:ill-bob 2.6s ease-in-out infinite}
  .ill-draw{stroke-dasharray:60;stroke-dashoffset:60;animation:ill-draw 1s ease .5s forwards}
}
@keyframes ill-spin{to{transform:rotate(360deg)}}
@keyframes ill-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes ill-sway{0%,100%{transform:skewX(0)}50%{transform:skewX(-6deg)}}
@keyframes ill-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ill-twinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.55}}
@keyframes ill-clip{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(26px,-10px);opacity:0}}
@keyframes ill-draw{to{stroke-dashoffset:0}}