/* Shared document tools: PDF download, print, and read-aloud controls for
   every phase page in the BBPAC governance document library. One file,
   loaded by all 12 phase-XX pages -- fixing or restyling here fixes every
   one of the 510 documents at once instead of hundreds of separate edits. */

.doc-card, .tmpl-card{ position:relative; }
.doc-toolbar{ display:flex; justify-content:flex-end; gap:6px; margin-bottom:10px; }
.dt-btn{ display:inline-flex; align-items:center; gap:6px; font-size:0.68rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; padding:6px 12px; border-radius:16px; border:1.5px solid var(--line); background:#fff; color:var(--navy); cursor:pointer; font-family:inherit; }
.dt-btn:hover{ border-color:var(--lakefront); color:var(--lakefront); }
.dt-btn.active{ background:var(--lakefront); border-color:var(--lakefront); color:#fff; }

/* Print isolation: clicking Print on one document hides everything else on
   the page (nav, header, other documents, the toolbars themselves) so the
   printed/"Save as PDF" output is that one document, not the whole page. */
@media print{
  body.dt-printing-one .doc-toolbar, body.dt-printing-one .site-header, body.dt-printing-one .navbar,
  body.dt-printing-one .breadcrumb, body.dt-printing-one .back-bar, body.dt-printing-one .page-hero,
  body.dt-printing-one footer, body.dt-printing-one #dtReaderBar{ display:none !important; }
  body.dt-printing-one .doc-card, body.dt-printing-one .tmpl-card{ display:none !important; }
  body.dt-printing-one .doc-card.dt-print-target, body.dt-printing-one .tmpl-card.dt-print-target{ display:block !important; }
}

/* Floating reader bar -- one shared player for the whole page, not one
   voice-picker duplicated onto every document card. */
#dtReaderBar{ position:fixed; left:16px; right:16px; bottom:16px; max-width:640px; margin:0 auto; background:#fff; border:1.5px solid var(--navy); border-radius:16px; box-shadow:0 8px 28px rgba(0,38,73,0.25); padding:12px 16px; z-index:500; display:none; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
#dtReaderBar.open{ display:block; }
#dtReaderBar .dt-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#dtReaderBar .dt-now{ font-size:0.72rem; color:var(--ink-dim); flex:1 1 100%; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#dtReaderBar select{ flex:1 1 160px; min-width:0; font-size:0.78rem; padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-family:inherit; }
#dtReaderBar .dt-rate{ display:flex; align-items:center; gap:4px; font-size:0.68rem; color:var(--ink-dim); white-space:nowrap; }
#dtReaderBar input[type="range"]{ width:70px; }
#dtReaderBar button{ border:none; background:var(--navy); color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:0.9rem; flex-shrink:0; }
#dtReaderBar button.dt-close{ background:transparent; color:var(--ink-dim); width:auto; height:auto; font-size:1rem; padding:4px; }
#dtReaderBar .dt-note{ flex:1 1 100%; font-size:0.66rem; color:var(--ink-dim); margin-top:4px; }