/* TennisDrills.tv / PickleballDrillsHQ Secure Downloads (the site's colors come from the settings and site profile) */
.tdo, .tdo-app-page {
  --tdo-accent: #0B2A9F;
  --tdo-hi: #F26A1B;
  --tdo-ink: #0E1530;
  --tdo-muted: #4A5470;
  --tdo-line: #DCE2EE;
  --tdo-soft: #F3F5FA;
  --tdo-card: #FFFFFF;
  --tdo-bg: #F3F5FA;
  --tdo-radius: 14px;
  --tdo-dark: #0E1530;
  --tdo-on-dark: #FFB27A;
  --tdo-tint: #E8EEFF;
  --tdo-tint-ink: #1D2B6B;
  --tdo-thumb: #2F6DB5;
  --tdo-doc: #EEF2FB;
  --tdo-btn-ink: #fff;
  --tdo-btn-radius: 10px;
  --tdo-dl-radius: 99px;
}
.tdo *, .tdo *::before, .tdo *::after { box-sizing: border-box; }
.tdo svg { flex: 0 0 auto; }

/* ---------- buttons on the site ---------- */
.tdo .tdo-dl-btn, .tdo-dl-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; margin: 0;
  border: 1.5px solid var(--tdo-accent, #0B2A9F); border-radius: var(--tdo-dl-radius, 99px); background: #fff; color: var(--tdo-accent, #0B2A9F);
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap;
}
.tdo-dl-btn::before { content: ""; position: absolute; inset: 0; width: var(--tdo-pct, 0%); background: rgba(11,42,159,.12); background: color-mix(in srgb, var(--tdo-accent, #0B2A9F) 12%, transparent); z-index: -1; transition: width .3s; }
.tdo-dl-btn:hover { background: #F3F5FA; background: color-mix(in srgb, var(--tdo-accent, #0B2A9F) 6%, #fff); }
.tdo-dl-btn:focus-visible { outline: 3px solid rgba(242,106,27,.7); outline: 3px solid color-mix(in srgb, var(--tdo-hi, #F26A1B) 70%, transparent); outline-offset: 2px; }
.tdo-dl-btn.is-done { background: var(--tdo-accent, #0B2A9F); color: #fff; }
.tdo-dl-btn.is-done::before { display: none; }
.tdo-dl-btn[disabled] { opacity: .6; cursor: wait; }
.tdo-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; }
.tdo-row-own { margin: 12px 0; }
.tdo-dl-auto { display: inline-flex; vertical-align: middle; margin: 0 auto 0 10px; } /* right after Add to Playlist, even in a spread-out row */
.tdo-toast { position: fixed; z-index: 2147483000; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--tdo-dark, #0E1530); color: #fff; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 14px 34px rgba(0,0,0,.3); transition: opacity .4s, transform .4s; }
.tdo-toast a { color: var(--tdo-on-dark, #FFB27A); font-weight: 700; white-space: nowrap; }
.tdo-toast.is-out { opacity: 0; transform: translate(-50%, 10px); }

/* ---------- My Downloads page ---------- */
html.tdo-lock, html.tdo-lock body { overflow: hidden; }
.tdo-app-page { margin: 0; min-height: 100vh; background: var(--tdo-bg); color: var(--tdo-ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.tdo-boot { padding: 40px 16px; text-align: center; color: var(--tdo-muted); }
.tdo-head { background: var(--tdo-accent); color: #fff; padding-top: env(safe-area-inset-top); }
.tdo-head-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.tdo-head h1 { margin: 0; flex: 1; font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.tdo .tdo-head .tdo-icon-btn, .tdo-home { color: #fff; }
.tdo-home { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; }
.tdo-home:hover, .tdo .tdo-head .tdo-icon-btn:hover { background: rgba(255,255,255,.12); }
.tdo-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.16); font-size: 13px; font-weight: 700; }
.tdo-pill.is-soft { background: var(--tdo-soft); color: var(--tdo-accent); border: 1px solid var(--tdo-line); margin-left: 8px; font-size: 12px; padding: 2px 8px; }
.tdo-wrap { max-width: 1100px; margin: 0 auto; padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
.tdo [hidden], .tdo .tdo-btn[hidden] { display: none !important; }
 /* e.g. Save to My Downloads before the diagram has opened */
.tdo .tdo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 18px; border-radius: var(--tdo-btn-radius, 10px); border: 1.5px solid var(--tdo-line); background: var(--tdo-card); color: var(--tdo-accent); font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; }
.tdo .tdo-btn:hover { border-color: var(--tdo-accent); }
.tdo .tdo-btn[disabled] { opacity: .55; cursor: default; }
.tdo .tdo-btn-primary { background: var(--tdo-btn, var(--tdo-accent)); border-color: var(--tdo-btn, var(--tdo-accent)); color: var(--tdo-btn-ink, #fff); }
.tdo .tdo-btn-primary:hover { background: var(--tdo-btn, var(--tdo-accent)); background: color-mix(in srgb, var(--tdo-btn, var(--tdo-accent)) 85%, #000); }
.tdo .tdo-btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.tdo .tdo-danger { color: #B42318; }
.tdo .tdo-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--tdo-muted); cursor: pointer; }
.tdo .tdo-icon-btn:hover { background: var(--tdo-soft); color: var(--tdo-ink); }
.tdo button:focus-visible, .tdo a:focus-visible, .tdo input:focus-visible { outline: 3px solid rgba(242,106,27,.7); outline: 3px solid color-mix(in srgb, var(--tdo-hi) 70%, transparent); outline-offset: 2px; }
.tdo-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--tdo-tint); color: var(--tdo-tint-ink); font-size: 15px; }
.tdo-notice.is-warn { background: #FFF1E6; color: #7A3307; }
.tdo-notice .tdo-icon-btn { width: 32px; height: 32px; color: inherit; }
.tdo-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 12px; background: #fff; border: 1px solid var(--tdo-line); }
.tdo .tdo-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--tdo-muted); font: inherit; font-weight: 700; cursor: pointer; }
.tdo .tdo-tab.is-on { background: var(--tdo-accent); color: #fff; }
.tdo-count { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: rgba(127,127,127,.18); }
.tdo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.tdo-card { display: flex; gap: 14px; padding: 12px; background: var(--tdo-card); border: 1px solid var(--tdo-line); border-radius: var(--tdo-radius); box-shadow: 0 1px 2px rgba(14,21,48,.05); min-width: 0; }
.tdo .tdo-cover { flex: 0 0 150px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; overflow: hidden; align-self: flex-start; }
.tdo-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--tdo-thumb); display: flex; align-items: center; justify-content: center; color: #fff; }
.tdo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tdo-thumb.is-doc { background: var(--tdo-doc); color: var(--tdo-accent); }
.tdo-thumb.is-blank:not(.is-doc) { background: linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.7) 49.5% 50.5%, transparent 50.5%), linear-gradient(transparent 48%, rgba(255,255,255,.7) 48% 52%, transparent 52%), var(--tdo-thumb); }
.tdo-thumb-play { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: rgba(14,21,48,.6); display: flex; align-items: center; justify-content: center; }
.tdo-dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(14,21,48,.78); font-size: 12px; font-weight: 600; }
.tdo-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.35); }
.tdo-bar span { display: block; height: 100%; background: var(--tdo-hi); transition: width .3s; }
.tdo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tdo .tdo-title { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.tdo-num { display: inline-block; margin-right: 6px; font-size: 12px; font-weight: 700; color: var(--tdo-muted); background: var(--tdo-soft); border: 1px solid var(--tdo-line); border-radius: 6px; padding: 0 6px; vertical-align: 2px; }
.tdo-sub { margin: 0; color: var(--tdo-muted); font-size: 14px; }
.tdo-card.is-expired .tdo-sub, .tdo-card.is-error .tdo-sub { color: #B42318; }
.tdo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.tdo .tdo-del { margin-left: auto; }
.tdo-empty { text-align: center; padding: 40px 16px; color: var(--tdo-muted); }
.tdo-empty p { max-width: 460px; margin: 10px auto 18px; }
.tdo-empty-icon { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: #fff; border: 1px solid var(--tdo-line); display: flex; align-items: center; justify-content: center; color: var(--tdo-accent); }
.tdo-foot { margin: 22px 0 0; color: var(--tdo-muted); font-size: 13px; text-align: center; }
.tdo-login { text-align: center; padding: 48px 16px; }
.tdo-login h2 { margin: 0 0 18px; }

/* ---------- viewer, player, settings ---------- */
.tdo-overlay { position: fixed; inset: 0; z-index: 2147482000; display: flex; flex-direction: column; background: #E9ECF3; color: var(--tdo-ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tdo-ov-bar { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: #fff; border-bottom: 1px solid var(--tdo-line); }
.tdo-ov-bar.is-dark { background: #000; color: #fff; border-color: #222; }
.tdo-ov-bar.is-dark .tdo-icon-btn { color: #fff; }
.tdo-ov-bar.is-dark .tdo-icon-btn:hover { background: rgba(255,255,255,.12); }
.tdo .tdo-ov-title { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdo-ov-tools { display: flex; align-items: center; gap: 6px; }
.tdo-ov-scroll { position: relative; flex: 1; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
.tdo-pages { display: flex; flex-direction: column; align-items: center; gap: 12px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tdo-page { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.15); max-width: none; }
.tdo-loading { color: var(--tdo-muted); padding: 40px; }
.tdo-wm { position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around; gap: 80px 60px; padding: 40px; }
.tdo-wm span { transform: rotate(-24deg); font-size: 18px; font-weight: 700; color: rgba(14,21,48,.07); white-space: nowrap; }
.tdo-player { background: #000; }
.tdo-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.tdo-video { width: 100%; height: 100%; max-height: 100%; background: #000; }
.tdo-vmark { position: absolute; left: 6%; top: 10%; color: rgba(255,255,255,.28); font-size: 14px; font-weight: 700; pointer-events: none; transition: left 2s, top 2s; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.tdo-player .tdo-empty { color: #ccc; }
.tdo-sheet { background: rgba(8,12,30,.55); align-items: center; justify-content: flex-end; }
.tdo-sheet-in { width: min(520px, 100%); max-height: 92vh; overflow: auto; margin: 0 auto; background: #fff; border-radius: 18px 18px 0 0; padding: 8px 18px calc(22px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .tdo-sheet { justify-content: center; } .tdo-sheet-in { border-radius: 18px; } }
.tdo-sheet-head { display: flex; align-items: center; justify-content: space-between; }
.tdo-sheet-head h2 { margin: 8px 0; font-size: 20px; }
.tdo-field { border: 0; margin: 0; padding: 14px 0; border-top: 1px solid var(--tdo-line); }
.tdo-field legend, .tdo-field h3 { margin: 0 0 6px; padding: 0; font-size: 16px; font-weight: 700; }
.tdo-help { margin: 0 0 8px; color: var(--tdo-muted); font-size: 14px; }
.tdo-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.tdo-radio input { width: 20px; height: 20px; accent-color: var(--tdo-accent); margin: 0; }
.tdo-devices { list-style: none; margin: 0; padding: 0; }
.tdo-devices li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--tdo-soft); }
.tdo-devices small { display: block; color: var(--tdo-muted); }

@media (max-width: 560px) {
  .tdo .tdo-cover { flex-basis: 112px; }
  .tdo-head h1 { font-size: 20px; }
  .tdo-tabs { display: flex; }
  .tdo .tdo-tab { flex: 1; justify-content: center; }
  .tdo-ov-tools .tdo-save { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2; min-height: 48px; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
  .tdo-ov-tools .tdo-btn-primary { padding: 0 12px; }
  .tdo-viewer .tdo-ov-scroll { padding-bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .tdo-dl-btn::before, .tdo-bar span, .tdo-vmark, .tdo-toast { transition: none; } }

/* ---------- printing: only the diagram pages ---------- */
#tdo-print { display: none; }
@media print {
  /* Only while a diagram is being printed (body.tdo-printing). Without the class, every other page on the
     site (practice plans, lessons, posts) printed as a blank page. */
  body.tdo-printing > *:not(#tdo-print) { display: none !important; }
  body.tdo-printing #tdo-print { display: block !important; }
  .tdo-print-page { page-break-after: always; break-after: page; text-align: center; }
  .tdo-print-page:last-child { page-break-after: auto; break-after: auto; }
  .tdo-print-page img { display: block; margin: 0 auto; width: 100%; height: auto; max-height: calc(100vh - 24px); object-fit: contain; } /* room for the footer line, so a diagram never spills onto a second sheet */
  .tdo-print-foot { margin: 4px 0 0; font: 10px/1.2 system-ui, sans-serif; color: #555; }
}
fieldset.tdo-field legend { float: left; width: 100%; }
fieldset.tdo-field legend + * { clear: both; }

.tdo-broken { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: rgba(0,0,0,.82); color: #fff; text-align: center; }
.tdo-broken p { max-width: 420px; margin: 0; font-size: 17px; }
.tdo-elsewhere { margin-top: 26px; }
.tdo-elsewhere h2 { margin: 0 0 4px; font-size: 18px; }
.tdo-elsewhere > p { margin: 0 0 12px; color: var(--tdo-muted); font-size: 14px; }
.tdo-card.is-elsewhere { background: transparent; border-style: dashed; box-shadow: none; }

.tdo-install { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 8px 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--tdo-line); box-shadow: 0 1px 2px rgba(14,21,48,.05); }
.tdo-install-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; background: var(--tdo-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.tdo-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; color: var(--tdo-muted); line-height: 1.35; }
.tdo-install-text strong { color: var(--tdo-ink); font-size: 15px; }
.tdo-steps { margin: 6px 0 16px; padding-left: 22px; font-size: 16px; line-height: 1.5; }
.tdo-steps li { margin: 0 0 10px; padding-left: 4px; }
.tdo-sheet-in > .tdo-notice { margin-bottom: 16px; }
@media (max-width: 420px) { .tdo-install-text span { display: none; } }

/* 1.0.7: My Downloads button next to Print */
@media (max-width: 560px) {
  .tdo-ov-tools .tdo-mydl { width: 40px; padding: 0; }
  .tdo-ov-tools .tdo-mydl span { display: none; }
  .tdo-viewer .tdo-ov-tools { gap: 2px; }
  .tdo-viewer .tdo-ov-tools .tdo-icon-btn { width: 36px; }
  .tdo-viewer .tdo-ov-title { font-size: 15px; }
}

/* 1.1: the diagram viewer inside the pop-up (iframe) */
html.tdo-embedded, html.tdo-embedded body { background: transparent; }
html.tdo-embedded .tdo-viewer { background: #E9ECF3; }
html.tdo-embedded .tdo-ov-bar { padding-top: 8px; }
html.tdo-embedded .tdo-boot { display: none; }
.tdo-pop-close { margin-left: 2px; }

/* the pop-up on the site's pages */
dialog.tdo-dlg { width: min(1040px, 94vw); height: min(92vh, 1200px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #E9ECF3; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
dialog.tdo-dlg::backdrop { background: rgba(8,12,30,.72); }
dialog.tdo-dlg iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
dialog.tdo-dlg .tdo-dlg-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tdo-muted, #4A5470); font: 16px system-ui, sans-serif; pointer-events: none; }
html.tdo-dlg-open { overflow: hidden; }
@media (max-width: 640px) {
  dialog.tdo-dlg { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
}

/* 1.2.1: storage reminder on the Videos tab */
.tdo-space { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #FFF6E0; border: 1px solid #F2D38A; color: #5C3D00; }
.tdo-space-icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; color: #B26B00; }
.tdo-space p { margin: 0; font-size: 15px; line-height: 1.45; }
.tdo-space .tdo-space-used { margin-top: 4px; font-size: 14px; font-weight: 700; }