/* Guides: the play maker's playbook inside a guide (guide-playbook.js). Mirrors the play maker's
 * pm-* styles (tools/flag-football-play-maker/index.html) so the two read as one tool. */
.gpb{padding:18px;margin:26px 0;display:grid;gap:14px;scroll-margin-top:90px}
.gpb-fallback{margin:0}
.gpb-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--v3-line)}
.gpb-head h3{margin:0;font-size:19px}
.gpb-count{font-size:13.5px;font-weight:700;color:var(--v3-body);white-space:nowrap}
.gpb-tabs{display:flex;flex-wrap:wrap;gap:6px}
.gpb-tab{display:inline-flex;align-items:center;gap:6px;flex:none;max-width:200px;padding:5px 10px 5px 5px;border:2px solid var(--v3-line);border-radius:10px;background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--v3-ink);cursor:pointer}
.gpb-tab:hover{border-color:var(--v3-blue)}
.gpb-tab b{display:inline-block;min-width:22px;padding:2px 4px;border-radius:6px;background:var(--v3-line);text-align:center}
.gpb-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gpb-tab.is-active{border-color:var(--v3-blue)}
.gpb-tab.is-active b{background:var(--v3-navy);color:#fff}
.gpb-main{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:24px;align-items:start}
/* Wider than the text column on desktop, so it reads as a tool, not a figure. */
@media (min-width:1100px){.gpb{margin-left:calc(50% - 520px);margin-right:calc(50% - 520px)}}
.gpb-fieldbox{position:relative;cursor:pointer;width:100%}
.gpb-fieldbox svg{display:block;width:100%;height:100%;box-sizing:border-box;border-radius:var(--v3-r);border:2px solid var(--v3-line);background:#eef7ee}
.gpb-fieldbox:hover svg{border-color:var(--v3-blue)}
.gpb-animbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.gpb-animbar .btn:disabled{opacity:.4;pointer-events:none}
.gpb-side{display:grid;gap:12px;align-content:start}
.gpb-title{display:flex;align-items:center;gap:8px}
.gpb-title h3{margin:0;font-size:20px}
.gpb-num{display:inline-block;min-width:1.6em;padding:1px 6px;border-radius:6px;background:var(--v3-navy);color:#fff;text-align:center;font-weight:800;font-size:15px}
.gpb-chips{display:flex;flex-wrap:wrap;gap:6px}
.gpb-chip{display:inline-block;padding:3px 10px;border:2px solid var(--v3-line);border-radius:999px;font-size:12.5px;font-weight:700;color:var(--v3-ink);background:#fff}
.gpb-rule{border-style:dashed;color:var(--v3-body)}
.gpb-sum{margin:0;font-size:14.5px;color:var(--v3-body);line-height:1.5}
.gpb-group{display:grid;gap:7px}
.gpb-group h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--v3-body)}
.gpb-seg{display:flex;flex-wrap:wrap;gap:6px}
.gpb-segbtn{padding:5px 10px;border:2px solid var(--v3-line);border-radius:999px;background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--v3-ink);cursor:pointer}
.gpb-segbtn:hover{border-color:var(--v3-blue)}
.gpb-segbtn.is-active{border-color:var(--v3-blue);background:var(--v3-blue-soft)}
.gpb-verdict{margin:0;padding:10px 12px;border-radius:10px;border:2px solid;font-size:14px;line-height:1.45;animation:gpb-pop .25s ease-out}
.gpb-verdict b{display:block;font-size:15px;margin-bottom:2px}
.gpb-verdict.is-legal{border-color:var(--v3-green);background:var(--v3-green-soft)}
.gpb-verdict.is-legal b{color:var(--v3-green)}
.gpb-verdict.is-flag{border-color:#f59e0b;background:#fef3c7}
.gpb-verdict.is-flag b{color:#92400e}
@keyframes gpb-pop{from{transform:scale(.97);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.gpb-verdict{animation:none}}
.v3 .gpb .gpb-works{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.v3 .gpb .gpb-works li{display:inline-flex;align-items:center;gap:5px;margin:0;padding:3px 9px 3px 4px;border:2px solid var(--v3-line);border-radius:999px;font-size:12.5px;font-weight:700;color:var(--v3-ink);background:#fff}
.gpb-works li span,.gpb-caveat span{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;font-size:10.5px;color:#fff;background:var(--v3-green)}
.gpb-works li.no span{background:var(--v3-red)}
.gpb-works li.part span,.gpb-caveat span{background:#f59e0b}
.gpb-caveat{margin:0;font-size:12.5px;color:var(--v3-body);display:flex;gap:6px;align-items:center}
.gpb-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gpb-jump{flex-basis:100%;font-size:13.5px;font-weight:700}
.gpb-figanim{cursor:pointer}
.gpb-figanim[hidden]{display:none}
.gpb-figanim svg{display:block;width:100%;height:auto;border-radius:8px;border:2px solid var(--v3-blue);background:#eef7ee;box-sizing:border-box}
.gpb-figbar{justify-content:center;margin:10px 0 4px}
.gif-box{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.gif-box:empty{display:none}
.gif-progress,.gif-ready{font-size:13.5px;font-weight:700;color:var(--v3-body)}
.gif-ready{color:var(--v3-green);flex-basis:100%}
@media (max-width:760px){.gpb-main{grid-template-columns:1fr}}
@media (max-width:640px){.gpb{padding:12px}.gpb-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}}
/* Article figures drawn in the play maker's style: the field at the playbook's size, not full column width. */
figure[data-play]>a,figure[data-play]>.gpb-figanim{max-width:500px;margin-left:auto;margin-right:auto}
figure[data-play] img{display:block;width:100%;height:auto;border-radius:var(--v3-r);border:2px solid var(--v3-line);box-sizing:border-box}
figure[data-play]>a:hover img{border-color:var(--v3-blue)}
figure[data-play] figcaption{text-align:center}