/* Dock (tt-dock): floating toolbar with hover magnification, used for the
   animation controls of the drawing editors (exercise editor, lineup board,
   tactic workspace). Magnification comes from static/js/tt-dock.js, which sets
   --s on every [data-dock-mag] item; without the script the dock stays static.
   Own file instead of app.css: the public drawing tool page (public_base.html)
   does not load app.css. */
.tt-dock-stack { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; }
.tt-dock { position: relative; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 56px; padding: 6px 8px; border-radius: 20px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(17, 24, 39, .08); box-shadow: 0 12px 32px -14px rgba(15, 23, 42, .38), 0 2px 6px rgba(15, 23, 42, .06); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
.tt-dock__item { --s: 40px; position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--s); height: var(--s); border-radius: 999px; color: #374151; background: transparent; font-size: calc(var(--s) * .35); font-weight: 700; line-height: 1; transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
.tt-dock__item svg { width: calc(var(--s) * .42); height: calc(var(--s) * .42); flex-shrink: 0; }
.tt-dock__item:hover { background: rgba(17, 24, 39, .07); color: #111827; }
.tt-dock__item:focus-visible { outline: 2px solid var(--brand-button, #2F7D6A); outline-offset: 2px; }
.tt-dock__item[aria-pressed="true"], .tt-dock__item.is-active { background: #111827; color: #fff; }
.tt-dock__item[disabled] { opacity: .35; cursor: not-allowed; background: transparent; color: #374151; }
.tt-dock__item--ghost { border: 1px dashed #d1d5db; color: #6b7280; }
.tt-dock__item--ghost:hover { border-color: #6b7280; }
.tt-dock__item--danger:hover { background: #fef2f2; color: #dc2626; }
.tt-dock__item--wide { width: auto; padding: 0 16px 0 12px; gap: 8px; font-size: 14px; font-weight: 600; }
.tt-dock__item--wide svg { width: 18px; height: 18px; }
.tt-dock__item--dark { background: #111827; color: #fff; }
.tt-dock__item--dark:hover { background: #374151; color: #fff; }
.tt-dock__sep { flex-shrink: 0; align-self: center; width: 1px; height: 28px; margin: 0 4px; background: rgba(17, 24, 39, .1); }
.tt-dock__steps { display: inline-flex; align-items: center; gap: 4px; }
.tt-dock__stepper { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 4px 0 10px; border-radius: 999px; background: rgba(17, 24, 39, .05); font-size: 12px; color: #6b7280; }
.tt-dock__stepper button { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #374151; font-size: 16px; font-weight: 600; transition: background-color .15s ease; }
.tt-dock__stepper button:hover { background: #fff; }
.tt-dock__stepper b { min-width: 40px; text-align: center; font-size: 13px; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; }
.tt-dock__chip { flex-shrink: 0; height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: #111827; color: #fff; font-size: 13px; font-weight: 700; }
.tt-dock__note { flex-shrink: 0; padding: 0 6px; font-size: 12px; color: #6b7280; white-space: nowrap; }

/* Tooltip above the item (data-tip), shown on hover and keyboard focus */
.tt-dock [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); padding: 5px 9px; border-radius: 8px; background: #111827; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease, transform .12s ease; z-index: 5; }
.tt-dock [data-tip]:hover::after, .tt-dock [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Timeline above the dock: scrubber plus step and duration label */
.tt-dock-track { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(17, 24, 39, .08); box-shadow: 0 8px 24px -14px rgba(15, 23, 42, .35); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); font-size: 12px; color: #6b7280; }
.tt-dock-track input[type="range"] { flex: 1; min-width: 0; height: 4px; accent-color: #111827; cursor: pointer; }
.tt-dock-track span { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tt-dock-track--hint { justify-content: center; text-align: center; white-space: normal; }

/* Touch screens and narrow widths: no magnification, no tooltips, the dock
   wraps instead of overflowing and every target keeps 44 px. */
@media (hover: none), (pointer: coarse) {
    .tt-dock [data-tip]::after { display: none; }
    .tt-dock__item { --s: 44px !important; }
}
@media (max-width: 639px) {
    .tt-dock-stack { flex-shrink: 1; max-width: 100%; }
    .tt-dock { flex-wrap: wrap; justify-content: center; border-radius: 22px; }
    .tt-dock__sep { display: none; }
    .tt-dock__item { --s: 44px !important; }
    .tt-dock__stepper { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .tt-dock__item { --s: 40px !important; }
}

/* Anleitung ueber dem Dock (bis zum ersten Abspielen) */
.tt-dock-guide { display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 8px 8px 8px 14px; border-radius: 16px; background: #111827; color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .6); }
.tt-dock-guide > span:nth-child(2) { flex: 1; min-width: 0; }
.tt-dock-guide button { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); }
.tt-dock-guide button:hover { background: rgba(255, 255, 255, .22); }
.tt-dock-guide__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; background: #facc15; box-shadow: 0 0 0 0 rgba(250, 204, 21, .6); animation: tt-dock-guide-pulse 1.6s ease-out infinite; }
@keyframes tt-dock-guide-pulse { 70% { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0); } 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } }
@media (prefers-reduced-motion: reduce) { .tt-dock-guide__dot { animation: none; } }