/* Capability one: animated "Daily branch reports" board, plus the synced step list in the copy column. */
.board-demo{--fig-bg:#132438;--fig-border:#1f3449;--cap-color:#a7b3bd;--surf:#0f1e30;--surf-border:#223850;--divider:#1f3449;--t-ink:#f4f1ea;--t-muted:#9aa7b0;--t-warn:#efc6a6;--card-bg:#172c42;--card-border:#284058;--skel:#22374d;--pend-bg:#1d3247;--pend-fg:#93a3b0;--rec-bg:#1e3d33;--rec-fg:#a8dcbb;--rec-glow:168,220,187;--rec-border:#3f6b58;--flag-bg:#efc6a6;--flag-fg:#3b2314;--flag-glow:239,198,166;--flag-border:#d6a27a;--queue-bg:#0c1929;--queue-border:#223850;background:var(--fig-bg);border-color:var(--fig-border)}
.board-demo[data-surface=light]{--fig-bg:#ebece4;--fig-border:#dce0d6;--cap-color:#536158;--surf:#fffdf7;--surf-border:#d9dfd5;--divider:#e4e7de;--t-ink:#14283a;--t-muted:#536158;--t-warn:#89522c;--card-bg:#f9f8f2;--card-border:#e1e4dc;--skel:#e6e8df;--pend-bg:#eceee6;--pend-fg:#59675d;--rec-bg:#e3efe6;--rec-fg:#31593f;--rec-glow:49,89,63;--rec-border:#a9c7b2;--flag-bg:#f5eadb;--flag-fg:#7b4929;--flag-glow:201,138,92;--flag-border:#c98a5c;--queue-bg:#f3f2ea;--queue-border:#dfe2d8}
.board-demo figcaption{color:var(--cap-color)}
.board-surface{background:var(--surf);border:1px solid var(--surf-border);border-radius:4px;overflow:hidden;color:var(--t-ink)}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--divider)}
.board-head h4{font-family:Manrope,sans-serif;font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:-.025em;margin:0;color:var(--t-ink)}
.board-head span{font-size:.8125rem;color:var(--t-muted);white-space:nowrap}
.board-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 18px;margin:0;border-bottom:1px solid var(--divider)}
.board-totals div{display:flex;flex-direction:column;gap:4px}
.board-totals dt{font-size:.8125rem;color:var(--t-muted);line-height:1.4}
.board-totals dd{font-family:Manrope,sans-serif;font-size:1.625rem;line-height:1.15;margin:0;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--t-ink);width:fit-content;transform-origin:left center}
.board-totals dd.warn{color:var(--t-warn)}
.board-totals dd.pop{animation:board-pop .35s ease-out}
@keyframes board-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.board-body{display:flex;flex-direction:column;gap:10px;padding:12px 18px 10px}
.board-queue{display:flex;align-items:center;gap:14px;min-height:58px;padding:8px 12px;background:var(--queue-bg);border:1px dashed var(--queue-border);border-radius:4px}
.board-queue-title{font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t-muted);white-space:nowrap}
.board-queue-empty{margin:0;font-size:.6875rem;color:var(--t-muted);line-height:1.5}
.board-queue-list{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.board-queue-list:empty{display:none}
.board-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:start}
.board-card{position:relative;display:flex;flex-direction:column;gap:5px;padding:9px 10px 8px;overflow:hidden;background:var(--card-bg);border:1px solid var(--card-border);border-radius:4px;will-change:transform}
.board-card::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(130px 90px at 0 0,rgba(var(--rec-glow),.16),transparent 70%)}
.board-card.received::before{opacity:1}
.board-card.received{border-color:var(--rec-border)}
.board-card.flagged::before{opacity:1;background:radial-gradient(130px 90px at 0 0,rgba(var(--flag-glow),.2),transparent 70%)}
.board-card.flagged{border-color:var(--flag-border);box-shadow:0 0 0 1px rgba(var(--flag-glow),.45),0 0 22px rgba(var(--flag-glow),.16)}
.board-card.bloom{animation:board-bloom .9s ease-out}
@keyframes board-bloom{0%{box-shadow:0 0 0 0 rgba(var(--g),0)}25%{box-shadow:0 0 0 1px rgba(var(--g),.75),0 0 26px rgba(var(--g),.35)}100%{box-shadow:0 0 0 0 rgba(var(--g),0)}}
.board-card.enter{animation:board-slab .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes board-slab{from{opacity:0;transform:translateX(-12px) skewX(-12deg) scaleX(.82)}to{opacity:1;transform:none}}
.board-card.out{animation:board-slab-out .18s ease-in both}
@keyframes board-slab-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(10px) skewX(10deg) scaleX(.85)}}
.board-card.flying{z-index:3;animation:board-fly .55s ease-in-out}
@keyframes board-fly{0%{filter:blur(0)}45%{filter:blur(1.5px)}100%{filter:blur(0)}}
.board-card .label{font-size:.75rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--t-ink)}
.board-chip{align-self:flex-start;padding:2px 7px;border-radius:2px;font-size:.5625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:14px;white-space:nowrap;min-width:40px;min-height:18px;box-sizing:border-box;background:var(--pend-bg);color:var(--pend-fg);transition:background .2s,color .2s}
.board-card.received .board-chip{background:var(--rec-bg);color:var(--rec-fg)}
.board-card.flagged .board-chip{background:var(--flag-bg);color:var(--flag-fg)}
.board-figs{display:flex;flex-direction:column;gap:2px;min-height:30px}
.board-figs .row{display:flex;justify-content:space-between;gap:6px;font-size:.6875rem;line-height:1.4;color:var(--t-muted)}
.board-figs .row b{font-weight:500;color:var(--t-ink);font-variant-numeric:tabular-nums}
.board-skel{display:flex;flex-direction:column;gap:8px;padding-top:3px;min-height:30px}
.board-skel span{display:block;height:8px;border-radius:2px;background:var(--skel)}
.board-skel span:first-child{width:72%}.board-skel span:last-child{width:48%}
.board-note{display:flex;flex-direction:column;gap:2px;font-size:.6875rem;line-height:1.4;color:var(--t-muted);min-height:30px}
.board-note .why{color:var(--t-warn);font-weight:500}
/* Docked follow-up card: one compact row inside the strip. */
.board-queue-list .board-card{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px;padding:7px 10px}
.board-queue-list .board-note{flex-direction:row;flex-wrap:wrap;gap:4px 10px;min-height:0}
.board-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 18px 12px;font-size:.75rem;line-height:1.5;color:var(--t-muted);min-height:38px}
.board-remind{display:inline-flex;align-items:center;gap:8px;color:var(--t-warn);transition:opacity .35s ease,transform .35s ease}
.board-remind svg{flex:0 0 auto}
.board-remind.off{opacity:0;transform:translateY(4px)}
/* Step list in the copy column, lit in sync with the loop. Shared by every animated capability row (board.js, sync.js). */
.capability-steps{list-style:none;margin:28px 0 0;padding:0;max-width:370px}
.capability-steps li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);color:#9aa3a8;transition:color .4s}
.capability-steps li:last-child{border-bottom:1px solid var(--line)}
.capability-steps .step-tick{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border:1px solid #ccd8c8;border-radius:50%;font-size:.6rem;color:inherit;transition:background .4s,border-color .4s,color .4s}
.capability-steps strong{display:block;font-weight:500;font-size:.95rem;line-height:1.4;color:inherit}
.capability-steps .step-note{display:block;font-size:.85rem;line-height:1.5;margin-top:2px;color:inherit}
.capability-steps li.is-current,.capability-steps li.is-done,body:not(.motion-enabled) .capability-steps li{color:var(--ink)}
.capability-steps li.is-current .step-note,.capability-steps li.is-done .step-note,body:not(.motion-enabled) .capability-steps .step-note{color:var(--muted)}
.capability-steps li.is-current .step-tick{background:#f5eadb;border-color:#c98a5c;color:#7b4929}
.capability-steps li.is-done .step-tick,body:not(.motion-enabled) .capability-steps .step-tick{background:#e4ebdf;border-color:#b4c6ac;color:#2e553d}
@media(max-width:1050px){.board-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.board-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.capability-steps{max-width:520px}}
@media(max-width:520px){.board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.board-totals dd{font-size:1.5rem}.board-head,.board-totals,.board-body,.board-foot{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.board-card,.board-card::before,.board-totals dd,.board-remind,.capability-steps li,.capability-steps .step-tick{animation:none!important;transition:none!important}}