/* Hallmark: sports editorial / coaching workroom. Real route sketches supply the art. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800;1,900&display=swap');
:root { --bg:#f2f0e7; --ink:#183b34; --muted:#576760; --card:#fffdf5; --orange:#ff733b; --band:#d7edc4; --display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif; --lab-rule:#c9cec3; --lab-lime:#d9ee91; --lab-paper:#e9e7da; }
body { background:var(--bg); }
.wrap { max-width:1440px; padding-inline:32px; }
.top { padding:0; background:var(--card); border-bottom:1px solid var(--ink); }
.top .wrap { max-width:1440px; border:0; border-radius:0; box-shadow:none; background:transparent; padding:12px 32px; }
.brand { font-size:1.65rem; font-weight:800; letter-spacing:-.3px; text-transform:uppercase; gap:5px; }
.brand::before { width:24px; height:24px; margin-right:4px; }
.top nav a { font-size:.82rem; border-radius:0; padding:6px 10px; }
.top nav a.nav-cta { background:var(--ink); color:var(--card); border:0; box-shadow:none; padding:7px 12px; }
.crumbs { margin-top:14px; font-size:.62rem; }
.pb-masthead { display:flex; align-items:center; gap:30px; padding:12px 0 18px; border-bottom:2px solid var(--ink); margin-bottom:18px; }
.pb-masthead h1 { font:900 clamp(3.5rem,6vw,5.5rem)/.86 var(--display); letter-spacing:-.025em; margin:8px 0 0; white-space:nowrap; }
.pb-masthead h1 em { color:var(--orange); font-style:italic; }
.pb-masthead-copy { margin-left:auto; min-width:190px; }
.pb-masthead-copy p { font-size:.92rem; line-height:1.35; margin:0 0 10px; font-weight:800; }
.pb-masthead-copy a { font-size:.8rem; color:var(--ink); text-decoration:none; display:flex; justify-content:space-between; min-height:32px; border-bottom:1px solid var(--ink); }
.pb-masthead-copy a span { font-size:1.4rem; line-height:1; }
.pb-library-index { border-left:1px solid var(--lab-rule); padding-left:26px; display:flex; align-items:center; gap:12px; }
.pb-library-index b { font:800 3.9rem/1 var(--display); }
.pb-library-index span { font:700 .57rem/1.7 var(--mono); white-space:nowrap; }
.pb-workbench { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:26px; align-items:start; }
.pb-main { min-width:0; }
.pb-tabs { display:flex; gap:0; border-bottom:1px solid var(--ink); margin-bottom:18px; }
.pb-tabs button { background:transparent; color:var(--muted); min-height:44px; padding:8px 24px 12px 0; margin-right:24px; border:0; border-bottom:3px solid transparent; font:900 .95rem var(--body); cursor:pointer; }
.pb-tabs button span { font:700 .65rem var(--mono); margin-right:7px; }
.pb-tabs button.active { color:var(--ink); border-bottom-color:var(--orange); }
.pb-tabs button:hover { color:var(--ink); }
.pb-eyebrow { font-size:.62rem; letter-spacing:.1em; }
.pb-button { border-radius:3px; border-width:1px; font-size:.84rem; }
.pb-primary { box-shadow:none; }
.pb-section-head { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:34px 0 14px; }
.pb-section-head h2 { font:800 2.2rem/1 var(--display); margin:0; }
.pb-section-head p:not(.pb-eyebrow) { font-size:.8rem; color:var(--muted); margin:0; }
.pb-starters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.pb-starters button { min-width:0; border:1px solid var(--lab-rule); border-top:4px solid var(--ink); background:var(--lab-paper); text-align:left; cursor:pointer; padding:12px; color:var(--ink); display:grid; grid-template-columns:1fr auto; }
.pb-starters button:nth-child(2n) { background:var(--lab-lime); }
.pb-starters button b { font:800 2rem/1 var(--display); }
.pb-starters button i { font:500 1.3rem var(--body); grid-area:1/2; font-style:normal; }
.pb-starters button span { font:900 .76rem/1.25 var(--body); grid-column:1/-1; margin-top:12px; }
.pb-starters button small { display:block; font-size:.62rem; font-weight:500; color:var(--muted); margin-top:3px; }
.pb-starters button:hover { border-color:var(--orange); background:var(--orange); }
.pb-vault-head { border-top:1px solid var(--lab-rule); padding-top:24px; margin-top:26px; }
.pb-vault-head h2 span { color:var(--orange); margin-left:12px; }
.pb-filters { display:grid; grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)); gap:8px; }
.pb-filters label,.pb-team-label,.pb-order label { font:800 .7rem var(--body); }
.pb-filters input,.pb-filters select,.pb-team-label input,.pb-roster input,.pb-order input,.pb-order textarea,.pb-order select { width:100%; background:var(--card); border:1px solid var(--lab-rule); border-radius:2px; min-height:44px; padding:9px; font:700 .85rem var(--body); color:var(--ink); margin-top:4px; }
.pb-type-filters { display:flex; gap:6px; align-items:center; margin:14px 0; flex-wrap:wrap; }
.pb-type-filters button { min-height:38px; padding:6px 14px; background:transparent; border:1px solid var(--lab-rule); border-radius:2px; color:var(--ink); font:800 .75rem var(--body); cursor:pointer; }
.pb-type-filters .active { background:var(--ink); color:var(--card); border-color:var(--ink); }
#pb-results { font:700 .65rem var(--mono); margin-left:auto; }
.pb-library { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.pb-play-card { position:relative; display:flex; flex-direction:column; min-width:0; background:var(--card); border:1px solid var(--lab-rule); border-radius:2px; overflow:hidden; transition:border-color 180ms,transform 180ms; }
.pb-play-card:hover { border-color:var(--ink); transform:translateY(-3px); }
.pb-play-card.is-picked { border-top:4px solid var(--ink); }
.pb-play-card.is-on-field { outline:2px solid var(--orange); outline-offset:2px; }
.pb-card-art { position:relative; width:100%; display:block; border:0; padding:8px 12px 28px; background:var(--lab-paper); cursor:pointer; }
.pb-card-art svg > rect { fill:var(--lab-paper); }
.pb-card-art svg > line { stroke:var(--ink); }
.pb-card-art svg > path[stroke='#ffffff'] { stroke:var(--ink); }
.pb-card-art svg marker[data-kind='route'] path { fill:var(--ink); }
.pb-card-art svg marker[data-kind='run'] path { fill:#ae541f; }
.pb-card-art svg > path[stroke='#ffd23f'] { stroke:#ae541f; }
.pb-card-art svg > circle[stroke='#ffffff'] { fill:var(--card); stroke:var(--ink); }
.pb-card-art svg > text[data-pos] { fill:var(--ink); }
.pb-card-preview { position:absolute; bottom:8px; left:12px; font:700 .53rem var(--mono); letter-spacing:.02em; color:var(--muted); }
.is-on-field .pb-card-preview { color:var(--ink); background:var(--orange); padding:3px 5px; }
.pb-card-info { padding:14px; display:flex; flex-direction:column; flex:1; }
.pb-card-tags { display:flex; align-items:center; justify-content:space-between; font:700 .57rem var(--mono); }
.pb-type-pass { background:#c9e9ee; }
.pb-type-run { background:#eed8a4; }
.pb-type-trick { background:#e6d6ed; }
.pb-card-tags span:last-child { padding:2px 5px; }
.pb-card-info h3 { font:800 1.55rem/1.03 var(--display); margin:12px 0 4px; }
.pb-card-info p { font-size:.7rem; color:var(--muted); margin:0 0 14px; }
.pb-add { min-height:44px; border:1px solid var(--lab-rule); border-radius:2px; width:100%; background:transparent; font:900 .76rem var(--body); color:var(--ink); cursor:pointer; margin-top:auto; }
.pb-add[aria-pressed=true] { background:var(--ink); color:var(--card); border-color:var(--ink); }
.pb-add:hover { background:var(--orange); color:var(--ink); }
.pb-board { position:sticky; top:18px; min-width:0; background:var(--card); border:1px solid var(--ink); border-left:7px solid var(--ink); border-radius:3px; box-shadow:6px 6px 0 var(--lab-paper); display:flex; flex-direction:column; max-height:calc(100dvh - 112px); }
.pb-board > * { flex:none; }
.pb-board-head { padding:18px 18px 14px; border-bottom:1px solid var(--lab-rule); }
.pb-board-label { display:flex; justify-content:space-between; align-items:center; }
.pb-board-label .pb-eyebrow { margin:0; }
.pb-board-label span { font-size:1.2rem; color:var(--orange); }
.pb-board-head h2 { font:800 2.1rem/1 var(--display); margin:8px 0; overflow-wrap:anywhere; }
.pb-board-head p:last-child { font-size:.67rem; line-height:1.5; margin:0; color:var(--muted); }
.pb-balance { display:flex; padding:12px 18px 0; gap:8px; }
.pb-balance span { font:800 .66rem var(--body); padding:2px 7px; }
.pb-board-print { padding:12px 18px; }
.pb-board-print .pb-button { width:100%; }
.pb-board-print .pb-text-button { display:block; margin:auto; font-size:.65rem; min-height:30px; padding:4px; }
main .pb-order { list-style:none; padding:0 12px; margin:0; flex:1; min-height:80px; overflow-y:auto; scrollbar-width:thin; }
main .pb-order-item { margin:0 0 10px; border:1px solid var(--lab-rule); border-radius:2px; padding:8px; background:var(--bg); cursor:grab; }
.pb-order-item.is-dragging { opacity:.4; }
.pb-order-head { display:flex; align-items:center; gap:8px; }
.pb-call-number { font:800 1.4rem/1 var(--display); width:20px; flex:none; }
.pb-order-art { flex:none; width:64px; padding:0; border:0; border-radius:2px; overflow:hidden; background:var(--ink); cursor:pointer; }
.pb-order-art .play-svg { border-radius:0; }
.pb-order-art svg > rect { fill:#244b3e; }
.pb-order-name { min-width:0; padding:4px 0; min-height:44px; border:0; background:transparent; font:900 .8rem/1.3 var(--body); text-align:left; color:var(--ink); cursor:pointer; overflow-wrap:anywhere; }
.pb-order-tools { display:flex; align-items:center; gap:4px; margin-top:8px; }
.pb-order-tools span { flex:1; font:700 .59rem var(--mono); color:var(--muted); }
.pb-order-tools button { width:32px; min-height:36px; border:1px solid var(--lab-rule); border-radius:2px; background:var(--card); color:var(--ink); cursor:pointer; }
.pb-order-tools button:hover { background:var(--lab-lime); }
.pb-order summary { font:800 .67rem var(--body); min-height:34px; padding-top:10px; cursor:pointer; }
.pb-order label { display:block; margin:8px 0; }
.pb-order textarea { resize:vertical; }
.pb-board-actions { display:flex; justify-content:space-between; border-top:1px solid var(--lab-rule); padding:4px 12px; }
.pb-board-actions button { font-size:.65rem; }
.pb-board > p { margin:0 16px 6px; font-size:.6rem; }
.pb-backup { padding:0 16px 8px; }
.pb-backup summary { font:800 .65rem var(--body); cursor:pointer; min-height:32px; padding-top:6px; }
.pb-backup[open] { overflow-y:auto; }
#pb-export { font-size:.74rem; }
.pb-import-label { display:block; font:800 .74rem var(--body); padding-bottom:8px; }
.pb-import-label input { width:100%; display:block; margin-top:8px; }
.pb-status { font:800 .8rem var(--body); margin:24px 0; min-height:22px; }
#view-team,#view-print { background:var(--card); padding:26px; border:1px solid var(--lab-rule); }
.pb-view > h2 { font:800 2.8rem/1 var(--display); margin:0 0 14px; }
.pb-view > p { font-size:.9rem; }
.pb-team-label { display:block; margin:24px 0; max-width:380px; }
.pb-roster { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pb-roster label { display:flex; align-items:center; gap:10px; padding:12px; background:var(--bg); border:1px solid var(--lab-rule); font-size:.8rem; }
.pb-roster b { font:800 1.8rem var(--display); width:30px; }
.pb-roster span { flex:1; }
.pb-roster input { width:55px; margin:0; }
.pb-tip { background:var(--lab-lime); padding:12px; border-left:3px solid var(--ink); font-size:.85rem; margin-block:20px; }
.pb-print-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:24px 0; }
.pb-print-choices button { min-height:100px; border:1px solid var(--lab-rule); border-top:4px solid var(--ink); background:var(--bg); text-align:left; padding:14px; color:var(--ink); font-family:var(--body); cursor:pointer; }
.pb-print-choices strong { display:block; font:800 1.8rem var(--display); }
.pb-print-choices span { font-size:.72rem; }
.pb-print-choices .active { background:var(--lab-lime); border-color:var(--ink); }
.pb-print-preview { margin-top:24px; border:1px solid var(--lab-rule); }
.pb-next { display:grid; grid-template-columns:1fr 1fr; background:var(--ink); color:var(--card); padding:32px; gap:50px; margin:36px 0; }
.pb-next h2 { font:800 3.5rem/.95 var(--display); margin:12px 0 0; }
.pb-next p { font-size:.86rem; margin-top:0; }
.pb-next nav { display:flex; gap:18px; flex-wrap:wrap; margin-block:16px; }
.pb-next a { color:var(--orange); font-size:.78rem; }
.pb-next .muted { color:#bdc9be; }
.pb-preview-dialog { position:fixed; width:min(950px,calc(100% - 24px)); max-height:90dvh; padding:26px; background:var(--bg); color:var(--ink); border:1px solid var(--ink); border-radius:4px; }
.pb-preview-dialog h2 { font:800 2.6rem var(--display); margin:6px 44px 20px 0; }
.pb-preview-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.pb-preview-layout h3 { font:800 1.7rem var(--display); margin:16px 0 8px; }
.pb-preview-layout p,.pb-preview-layout li { font-size:.85rem; }
.pb-animation-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.pb-scrubber { display:block; font-size:.75rem; margin-top:14px; }
.pb-scrubber input { display:block; width:100%; min-height:44px; accent-color:var(--orange); }
.pb-preview-dialog > .pb-button { margin:16px 6px 0 0; }
.pb-preview-dialog .pb-close { position:sticky; float:right; top:0; margin:-10px -10px 0 0; border-radius:2px; }
@media (min-width:960px) { .pb-dock { left:auto; right:32px; transform:none; width:310px; } #pb-dock-open { gap:7px; padding-inline:5px; } .pb-dock strong { font-size:.7rem; } .pb-dock a { padding-inline:5px; } #pb-dock-print { min-width:59px; padding-inline:7px; } }
@media (max-width:1199px) { .pb-masthead { gap:24px; } .pb-library-index { display:none; } .pb-workbench { grid-template-columns:minmax(0,1fr) 280px; gap:18px; } .pb-starters { grid-template-columns:repeat(3,minmax(0,1fr)); } .pb-library { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:959px) { .wrap { padding-inline:20px; } .top .wrap { padding-inline:20px; } .pb-workbench { grid-template-columns:minmax(0,1fr); } .pb-board { position:relative; top:auto; max-height:none; } main .pb-order { max-height:480px; } .pb-board-head h2 { font-size:2.5rem; } .pb-library { grid-template-columns:repeat(3,minmax(0,1fr)); } .pb-starters { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:639px) { .wrap { padding-inline:14px; } .top .wrap { padding:10px 14px; gap:4px; } .brand { font-size:1.4rem; } .top nav { width:100%; justify-content:space-between; gap:0; } .top nav a { padding:6px 5px; font-size:.7rem; } .top nav .nav-cta { display:none; } .pb-masthead { padding:18px 0; margin-bottom:14px; gap:10px; align-items:end; } .pb-masthead .pb-eyebrow { font-size:.49rem; letter-spacing:0; } .pb-masthead h1 { font-size:3.7rem; } .pb-masthead-copy { min-width:0; } .pb-masthead-copy p { display:none; } .pb-masthead-copy a { font-size:.68rem; border:0; max-width:75px; line-height:1.2; gap:4px; } .pb-tabs { margin-bottom:12px; justify-content:space-between; } .pb-tabs button { padding:8px 0; margin:0; font-size:.8rem; } .pb-tabs button span { font-size:.55rem; margin-right:4px; } .pb-section-head { align-items:start; margin-top:28px; } .pb-section-head h2 { font-size:1.9rem; } .pb-section-head > p { max-width:105px; font-size:.66rem !important; } .pb-starters { display:flex; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; } .pb-starters button { flex:0 0 145px; scroll-snap-align:start; } .pb-filters { grid-template-columns:repeat(3,minmax(0,1fr)); } .pb-search { grid-column:1/-1; } .pb-library { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .pb-card-info { padding:10px; } .pb-card-info h3 { font-size:1.35rem; } .pb-card-preview { font-size:.44rem; } .pb-card-art { padding:6px 8px 25px; } .pb-type-filters button { padding:6px 10px; } .pb-roster { grid-template-columns:1fr; } .pb-print-choices { grid-template-columns:1fr; } .pb-print-choices button { min-height:80px; } #view-team,#view-print { padding:18px; } .pb-view > h2 { font-size:2.2rem; } .pb-next { grid-template-columns:1fr; gap:24px; padding:24px; } .pb-next h2 { font-size:3rem; } .pb-preview-layout { grid-template-columns:1fr; } .pb-preview-dialog { padding:18px; } }
@media (max-width:359px) { .pb-masthead h1 { font-size:3.05rem; } .pb-masthead-copy a { font-size:.6rem; max-width:63px; } .pb-card-info h3 { font-size:1.2rem; } .pb-card-tags { font-size:.5rem; } }
@media (max-width:639px) {
  .pb-masthead { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 10px; }
  .pb-masthead > div:first-child { display:contents; }
  .pb-masthead .pb-eyebrow { grid-column:1; grid-row:1; margin:0; font-size:.43rem; }
  .pb-masthead h1 { grid-column:1/-1; grid-row:2; }
  .pb-masthead-copy { grid-column:2; grid-row:1; margin:0; }
  .pb-masthead-copy a { max-width:none; min-height:28px; font-size:.6rem; white-space:nowrap; align-items:center; gap:6px; }
  .pb-masthead-copy a span { font-size:1rem; }
}
@media (prefers-reduced-motion:reduce) { .pb-play-card { transition:none; } .pb-play-card:hover { transform:none; } }
/* Coaching help is part of the rendered page, alongside the interactive workroom. */
.pb-masthead h1 .pb-h1-context{display:block;font:700 12px/1.5 'Space Mono',monospace;letter-spacing:.03em;text-transform:none;margin:0 0 8px}
.pb-guide{margin-top:56px;padding:32px 0;border-top:2px solid var(--ink);max-width:1040px}
.pb-guide>p:not(.pb-eyebrow){max-width:760px}
.pb-guide-steps{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;padding-left:22px;margin:24px 0 40px}
.pb-guide-steps li{padding-left:5px;line-height:1.7}
.pb-guide-steps strong{display:block;color:var(--ink)}
.pb-guide-faq{border-top:1px solid var(--ink)}
.pb-guide-faq details{border-bottom:1px solid #bcc5ba;padding:16px 0}
.pb-guide-faq summary{font-weight:900;cursor:pointer;line-height:1.5}
.pb-guide-faq p{max-width:760px;margin:12px 0 0;line-height:1.7}
@media(max-width:640px){.pb-guide-steps{grid-template-columns:1fr;gap:20px}.pb-guide{margin-top:32px}.pb-masthead h1 .pb-h1-context{font-size:10px}}