/* The play library is an open coaching binder: its controls are part of the cover,
   while each concept occupies one readable paper sheet. */
.notebook {
  --book-leather:#314945; --book-edge:#182f2d; --book-stitch:#8e9c7c;
  --book-label:#dfd4aa; --book-paper:#faf4e5; --book-paper-back:#eae4d5;
  --book-ink:#213b3d; --book-muted:#63706b; --book-rule:#c3d0c3;
  --book-accent:#8f5031; --book-selection:#e4e9d9;
  position:relative; isolation:isolate; min-width:0; margin:0 0 18px;
  padding:22px 26px 26px; color:var(--book-ink); border:1px solid var(--book-edge);
  border-radius:8px 13px 13px 8px;
  background:repeating-linear-gradient(35deg,transparent 0 3px,#ffffff03 3px 4px),var(--book-leather);
  box-shadow:inset 0 0 0 7px var(--book-leather),inset 0 0 0 8px var(--book-stitch),0 5px 0 var(--book-edge),0 12px 24px #101a1926;
}
[data-theme="dark"] .notebook {
  --book-leather:#253631; --book-edge:#101e1b; --book-stitch:#687968;
  --book-label:#cfbf8f; --book-paper:#263634; --book-paper-back:#1e2b29;
  --book-ink:#ede7d4; --book-muted:#b4bfae; --book-rule:#485b52;
  --book-accent:#dfac7a; --book-selection:#374b3f;
}
.notebook [hidden] { display:none!important; }
.notebook { overflow-anchor:none; }
.notebook .playbook-filters button { white-space:nowrap; }
.notebook-cover-label { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 0 19px; color:var(--book-label); font-size:14px; letter-spacing:1.4px; }
.notebook-cover-label strong { font-size:19px; font-weight:700; letter-spacing:2.3px; }
.notebook .playbook-toolbar { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:14px; margin:0; padding:0 0 0; }
.notebook .playbook-filters { display:flex; flex-wrap:wrap; align-items:end; gap:5px; padding:0; margin:0; border:0; background:none; }
.notebook .playbook-filters button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:43px; padding:8px 14px; color:var(--book-label); background:#152b2780; border:1px solid #aeb99a48; border-bottom:0; border-radius:5px 5px 0 0; font-size:18px; box-shadow:none; }
.notebook .playbook-filters button:hover { background:#152b27; color:#f5eedb; }
.notebook .playbook-filters button.active { color:var(--book-ink); background:var(--book-paper); border-color:var(--book-paper); }
.playbook-filter-count { opacity:.65; font-size:14px; font-variant-numeric:tabular-nums; }
.notebook .playbook-tools { display:flex; align-items:center; gap:13px; margin:0 0 9px; min-width:0; }
.notebook .playbook-tools .search-control { flex:1; min-width:0; width:230px; margin:0; }
.notebook .playbook-tools input { width:230px; max-width:100%; min-height:38px; margin:0; padding:7px 10px; color:#f3eddc; background:#142925aa; border:1px solid #aeb99a69; border-radius:3px; font-size:18px; }
.notebook .playbook-tools .search-control input { width:100%; }
.notebook .playbook-tools .search-clear { color:#dfd4aa; }
.notebook .playbook-tools input::placeholder { color:var(--control-muted); opacity:1; }
.notebook .playbook-tools small { white-space:nowrap; color:var(--book-label); font-size:15px; }
.notebook-spread { position:relative; display:grid; grid-template-columns:minmax(215px,28%) 32px minmax(0,1fr); min-width:0; min-height:660px; background:var(--book-paper); border:1px solid var(--book-edge); box-shadow:0 3px 0 var(--book-paper-back),0 4px 0 #738478,0 7px 0 var(--book-paper-back); }
.notebook-index { min-width:0; padding:26px 0 18px; display:flex; flex-direction:column; background:var(--book-paper-back); box-shadow:inset -10px 0 18px -12px #122d2b66; }
.notebook-index-heading { display:grid; gap:6px; margin:0 21px 17px; padding-bottom:17px; border-bottom:2px solid var(--book-ink); }
.notebook-index-heading>span { font-size:14px; letter-spacing:1.8px; color:var(--book-muted); }
.notebook-index-heading>strong { font-size:25px; line-height:1.15; font-weight:700; }
.notebook-index-heading>small { font-size:16px; color:var(--book-muted); }
.notebook-contents-list { display:grid; align-content:start; overflow-y:auto; max-height:550px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--book-rule) transparent; }
.notebook .notebook-entry { display:grid; grid-template-columns:25px minmax(0,1fr) 13px; align-items:center; gap:9px; width:100%; min-height:62px; margin:0; padding:11px 18px; text-align:left; color:var(--book-ink); background:transparent; border:0; border-bottom:1px solid var(--book-rule); border-radius:0; box-shadow:none; }
.notebook .notebook-entry:hover { background:var(--book-selection); }
.notebook .notebook-entry.is-selected { background:var(--book-selection); box-shadow:inset 4px 0 var(--book-accent); }
.notebook-entry-number { font-size:15px; color:var(--book-muted); font-variant-numeric:tabular-nums; }
.notebook-entry-copy { display:grid; gap:4px; min-width:0; }
.notebook-entry-copy strong { font-size:19px; line-height:1.05; font-weight:700; overflow-wrap:anywhere; }
.notebook-entry-copy small { font-size:14px; line-height:1.15; color:var(--book-muted); }
.notebook-entry-arrow { opacity:0; font-size:19px; color:var(--book-accent); }
.is-selected .notebook-entry-arrow { opacity:1; }
.notebook-index-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:auto; padding:20px 15px 0; color:var(--book-muted); font-size:12px; letter-spacing:.7px; }
.notebook-index-footer span { color:var(--book-accent); font-size:10px; }
.notebook-binding { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:space-around; padding:68px 0; background:linear-gradient(90deg,var(--book-paper-back),var(--book-edge) 45%,var(--book-edge) 58%,var(--book-paper)); }
.notebook-binding i { position:relative; display:block; width:42px; height:14px; border:1px solid #364b43; border-radius:8px; background:linear-gradient(#e9e3cc,#aaa98d 35%,#f8f0d5 48%,#767e6a 70%,#3b5047); box-shadow:0 2px 3px #0a191c80; }
.notebook-binding i::before,.notebook-binding i::after { content:""; position:absolute; top:2px; z-index:-1; width:13px; height:13px; border-radius:50%; background:#1b2c24; box-shadow:0 0 0 2px #82908070; }
.notebook-binding i::before { left:-3px; }.notebook-binding i::after { right:-3px; }
.notebook-right { min-width:0; display:flex; flex-direction:column; background:var(--book-paper); box-shadow:inset 12px 0 16px -18px #0b2623; }
.notebook-pages { flex:1; min-width:0; }
.notebook .notebook-page { display:block; min-width:0; margin:0; padding:24px 28px 22px; color:var(--book-ink); background:transparent; border:0; border-radius:0; box-shadow:none; }
.notebook-page-running { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:13px; border-bottom:1px solid var(--book-rule); color:var(--book-muted); font-size:14px; letter-spacing:1.2px; font-variant-numeric:tabular-nums; }
.notebook-play-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0 18px; }
.notebook-classification { display:block; margin:0 0 6px; font-size:15px; letter-spacing:1px; text-transform:uppercase; color:var(--book-muted); }
.notebook .notebook-play-heading h2 { margin:0; color:var(--book-ink); font-size:34px; line-height:1.06; letter-spacing:0; text-transform:none; overflow-wrap:anywhere; }
.notebook-play-stamp { flex:none; padding:7px 9px 5px; border:2px solid var(--book-accent); color:var(--book-accent); font-size:19px; line-height:1; letter-spacing:1.2px; transform:rotate(-5deg); }
.notebook-diagram-wrap { position:relative; overflow:hidden; padding:7px; border:1px solid var(--book-rule); background:repeating-linear-gradient(0deg,transparent 0 15px,#7e978e18 15px 16px),repeating-linear-gradient(90deg,transparent 0 15px,#7e978e18 15px 16px); }
.notebook .playbook-card .notebook-diagram { display:block; width:100%; height:auto!important; max-height:none; aspect-ratio:2/1; margin:0; border:0; background:var(--book-paper); image-rendering:auto; }
.notebook-play-details { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0; padding:18px 0; border-bottom:1px solid var(--book-rule); }
.notebook-play-details>div { min-width:0; }
.notebook-play-details dt { color:var(--book-muted); font-size:14px; letter-spacing:.7px; text-transform:uppercase; }
.notebook-play-details dd { margin:5px 0 0; font-size:19px; line-height:1.2; }
.notebook-role { display:inline-flex; align-items:center; justify-content:center; min-width:21px; height:21px; padding:0 4px; border:1px solid var(--book-ink); border-radius:50%; font-size:16px; }
.notebook-coach-note { margin:20px 0 24px; padding-left:14px; border-left:2px solid var(--book-accent); }
.notebook-coach-note>span { color:var(--book-accent); font-size:14px; letter-spacing:1px; }
.notebook .notebook-coach-note p { margin:7px 0 0; padding:0; color:var(--book-ink); font-size:19px; line-height:1.4; }
.notebook .notebook-page-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0; padding:0; }
.notebook .notebook-page-actions button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:9px 15px; border-radius:2px; font-size:19px; }
.notebook .notebook-page-actions .secondary { color:var(--book-ink); background:transparent; border:1px solid var(--book-rule); box-shadow:none; }
.notebook .notebook-page-actions .primary { color:var(--book-paper); background:var(--book-ink); border:1px solid var(--book-ink); box-shadow:2px 2px 0 var(--book-rule); }
.notebook .notebook-page-actions button:hover { filter:brightness(.92); }
.notebook .notebook-page-actions .icon { width:17px; height:17px; }
.notebook-page-navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 28px; padding:17px 0 19px; border-top:1px solid var(--book-rule); }
.notebook .notebook-page-navigation button { min-height:36px; padding:5px 0; color:var(--book-ink); background:transparent; border:0; border-radius:0; font-size:18px; box-shadow:none; }
.notebook .notebook-page-navigation button:hover:not(:disabled) { color:var(--book-accent); }
.notebook .notebook-page-navigation button:disabled { opacity:.35; cursor:default; }
.notebook-page-navigation>span { color:var(--book-muted); text-align:center; font-size:16px; font-variant-numeric:tabular-nums; }
.notebook-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:450px; padding:30px; text-align:center; }
.notebook-empty-mark { font-size:65px; color:var(--book-accent); }
.notebook .notebook-empty h2 { color:var(--book-ink); font-size:29px; margin:8px 0; }
.notebook .notebook-empty p { max-width:35ch; font-size:19px; line-height:1.35; color:var(--book-muted); }
.notebook-mobile-index { display:none; }
.notebook-bottom-edge { position:absolute; inset:auto 26px 13px; height:2px; background:#d4c6a536; }
.notebook :is(button,input,summary):focus-visible { outline:3px solid var(--book-accent); outline-offset:3px; }
.notebook .playbook-tools input:focus-visible,.notebook .playbook-filters button:focus-visible { outline-color:var(--book-label); outline-offset:2px; }
@media(max-width:1100px) {
  .notebook { padding:21px 21px 25px; }
  .notebook-cover-label { font-size:12px; gap:10px; }
  .notebook-cover-label strong { font-size:17px; letter-spacing:1.7px; }
  .notebook-spread { grid-template-columns:minmax(180px,27%) 25px minmax(0,1fr); }
  .notebook .notebook-entry { padding:11px 13px; grid-template-columns:23px minmax(0,1fr) 10px; gap:6px; }
  .notebook-entry-copy strong { font-size:18px; }
  .notebook-index-heading { margin-inline:16px; }
  .notebook-index-heading>strong { font-size:23px; }
  .notebook .notebook-page { padding:23px 21px 20px; }
  .notebook-page-navigation { margin-inline:21px; }
  .notebook-play-details { gap:12px; }
  .notebook-play-details dd { font-size:18px; }
  .notebook .playbook-toolbar { gap:9px; }
  .notebook .playbook-filters button { padding:8px 10px; }
  .notebook .playbook-tools { gap:10px; }
  .notebook .playbook-tools input { width:200px; }
  .notebook .playbook-tools .search-control { width:200px; }
}
@media(max-width:780px) {
  .notebook { padding:20px 16px 25px; }
  .notebook-cover-label { flex-wrap:wrap; justify-content:center; gap:5px 13px; padding-bottom:16px; }
  .notebook-cover-label strong { order:-1; width:100%; text-align:center; font-size:20px; }
  .notebook .playbook-toolbar { display:flex; flex-direction:column-reverse; align-items:stretch; gap:9px; }
  .notebook .playbook-tools { margin:0; justify-content:space-between; }
  .notebook .playbook-tools input { flex:1; width:0; }
  .notebook .playbook-tools .search-control { flex:1; width:0; }
  .notebook .playbook-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .notebook .playbook-filters button { gap:7px; min-width:0; padding:9px 4px; font-size:17px; }
  .notebook-spread { display:block; min-height:0; }
  .notebook-index,.notebook-binding { display:none; }
  .notebook-mobile-index { display:block; border-bottom:1px solid var(--book-rule); background:var(--book-paper-back); }
  .notebook-mobile-index summary { display:grid; grid-template-columns:minmax(0,1fr) 18px; gap:5px; padding:14px 20px; cursor:pointer; list-style:none; color:var(--book-ink); }
  .notebook-mobile-index summary::-webkit-details-marker { display:none; }
  .notebook-mobile-index summary>span { font-size:18px; }
  .notebook-mobile-index summary small { margin-left:8px; color:var(--book-muted); font-size:14px; }
  .notebook-mobile-index summary>strong { grid-row:2; font-size:17px; font-weight:400; color:var(--book-muted); }
  .notebook-mobile-index summary::after { grid-column:2; grid-row:1 / 3; align-self:center; content:"+"; font-size:24px; color:var(--book-accent); }
  .notebook-mobile-index[open] summary::after { content:"−"; }
  .notebook-mobile-index .notebook-contents-list { max-height:310px; border-top:1px solid var(--book-rule); }
  .notebook .notebook-mobile-index .notebook-entry { grid-template-columns:28px minmax(0,1fr) 14px; padding:12px 20px; }
  .notebook .notebook-play-heading h2 { font-size:31px; }
  .notebook-empty { min-height:300px; }
}
@media(max-width:420px) {
  .notebook { padding:20px 12px 23px; margin-inline:-2px; }
  .notebook-cover-label strong { font-size:18px; letter-spacing:1.5px; }
  .notebook .playbook-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .notebook .playbook-filters button { min-height:36px; border-bottom:1px solid #aeb99a48; border-radius:3px; }
  .notebook .playbook-tools small { font-size:14px; }
  .notebook .notebook-page { padding:17px 14px 20px; }
  .notebook-page-running { font-size:12px; letter-spacing:.7px; }
  .notebook-play-heading { gap:10px; padding-block:18px; }
  .notebook .notebook-play-heading h2 { font-size:27px; }
  .notebook-play-stamp { padding:6px; font-size:16px; }
  .notebook-classification { font-size:14px; }
  .notebook-play-details { grid-template-columns:1fr; gap:12px; padding-block:15px; }
  .notebook .notebook-coach-note p { font-size:18px; }
  .notebook .notebook-page-actions { gap:8px; }
  .notebook .notebook-page-actions button { padding:9px 10px; font-size:18px; }
  .notebook-page-navigation { margin-inline:14px; gap:8px; }
  .notebook .notebook-page-navigation button { font-size:16px; }
  .notebook-page-navigation>span { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .notebook * { transition:none!important; } }