/*
 * A drill explained (training/includes/drill_explained.html, drill_steps.html,
 * drill_legend*.html) and the plan picture. One stylesheet for the website,
 * the admin, the print view and the PDF.
 *
 * The base rules are WeasyPrint-safe (tables and inline blocks, margins
 * instead of flex `gap`, no var() inside gradients or calc()); the
 * `@media screen` block adds flex layouts, hover states and animations for
 * browsers. Sizes are in em so print (9pt) and screen (16px) scale alike.
 */

.dx { --dx-ink: #111827; --dx-muted: #6b7280; --dx-line: #e6e8ec; --dx-soft: #f7f8fa; --dx-brand: #d22b2b; }
.dx *, .dx-legend * { box-sizing: border-box; }

/* ── top: picture left, data right ─────────────────────────────────── */
.dx-top { display: table; width: 100%; table-layout: fixed; border-collapse: separate; }
.dx-figure, .dx-data { display: table-cell; vertical-align: top; }
.dx-figure { width: 40%; margin: 0; padding: 0 1.6em 0 0; }
.dx-figure svg { display: block; width: 100%; height: auto; }
.dx-head { margin: 0 0 .8em; }
.dx-title { margin: 0; font-size: 1.3em; font-weight: 800; line-height: 1.2; }
.dx-meta { margin: .3em 0 0; color: var(--dx-muted); font-size: .85em; font-weight: 600; }
.dx-desc { margin: 0 0 .9em; color: var(--dx-muted); font-size: .92em; line-height: 1.5; }

/* ── the ball cards ────────────────────────────────────────────────── */
.dx-cards { list-style: none; margin: 0; padding: 0; }
.dx-card { position: relative; margin: 0 0 .6em; padding: .7em .9em .75em 3.2em; border-radius: .85em; background: #fff;
    border: 1px solid var(--dx-line); border-left: .34em solid var(--sc, #9ca3af); page-break-inside: avoid; break-inside: avoid; }
.dx-card--empty { padding-left: 1em; color: var(--dx-muted); border-left-color: var(--dx-line); }
.dx-card > .dx-num { position: absolute; left: .7em; top: .7em; }
.dx-card > .box { position: absolute; right: .7em; top: .8em; }
.dx-num { display: inline-block; width: 1.8em; height: 1.8em; line-height: 1.8em; border-radius: 50%; text-align: center;
    font-weight: 800; font-size: .9em; color: #111827; background: var(--sc, #e5e7eb); border: 1px solid rgba(17, 24, 39, .45);
    vertical-align: middle; }
.dx-card__head { line-height: 1.6; }
.dx-card__head > *, .dx-card__chips > * { margin-right: .4em; vertical-align: middle; }
.dx-card__chips { margin-top: .35em; line-height: 1.9; }
.dx-player { display: inline-block; min-width: 1.65em; padding: 0 .4em; border-radius: .45em; background: #111827; color: #fff;
    font-weight: 800; font-size: .76em; line-height: 1.75em; text-align: center; }
.dx-stroke { font-weight: 800; font-size: 1.02em; }
.dx-hand, .dx-spin, .dx-chip { display: inline-block; padding: 0 .65em 0 .45em; border-radius: 1em; font-size: .76em; font-weight: 700;
    line-height: 1.95em; white-space: nowrap; }
.dx-hand { background: #fff; color: #111827; border: 1px solid #d7dbe1; }
.dx-hand svg, svg.trn-racket { display: inline-block; vertical-align: -.28em; margin-right: .35em; }
.dx-hand--mini { padding: 0 .45em 0 .3em; }
.dx-spin { background: #f1f4f8; background: var(--spt, #f1f4f8); color: #111827; border: 1px solid #d7dbe1; border-color: var(--spc, #d7dbe1); }
.dx-spin svg { display: inline-block; vertical-align: -.25em; margin-right: .35em; width: 1.25em; height: 1.25em; }
.dx-spin.is-implied { border-style: dashed; }
.dx-chip { padding: 0 .65em; background: #fff; border: 1px solid #d7dbe1; color: #374151; }
.dx-chip--later { border-style: dashed; color: #6b7280; }
.dx-target { display: table; margin-top: .45em; font-size: .93em; line-height: 1.35; color: #1f2937; }
.dx-target__icon { display: table-cell; vertical-align: middle; width: 2.9em; }
.dx-target__icon svg { display: block; width: 2.9em; height: 2.7em; }
.dx-target__txt { display: table-cell; vertical-align: middle; padding-left: .55em; }
.dx-target__to { display: block; font-size: .72em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dx-muted); }
.dx-target__where { display: block; font-weight: 700; }
svg.dx-zone { display: inline-block; vertical-align: middle; }
.dx-muted { color: var(--dx-muted); }
.dx-note { margin-top: .35em; font-size: .86em; color: #4b5563; font-style: italic; }
.dx-then { display: inline-block; margin: .3em 0 .7em; padding: .5em 1em; border-radius: 2em; font-weight: 800; font-size: .9em;
    color: #9f1c1c; background: #fdecec; border: 1px solid #f5b5b5; }
.dx-pnote { margin: .4em 0 0; padding: .55em .85em; border-radius: .7em; background: #fffbeb; border: 1px solid #fde68a; font-size: .88em; }
.dx-rounds { margin: .5em 0 0; font-size: .85em; color: #374151; }
.dx-rounds .box { margin-left: .3em; }
.dx-extra { margin-top: 1em; font-size: .88em; line-height: 1.5; }
.dx-extra p { margin: 0 0 .45em; }
.dx-extra .dx-steps-title { margin-top: 0; }

/* ── one picture per ball, below, across the full width ────────────── */
.dx-steps-title { margin: 1.2em 0 .5em; font-size: .72em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-brand); }
table.dx-steps { table-layout: fixed; border-collapse: separate; border-spacing: .7em 0; width: 100%; page-break-inside: avoid; break-inside: avoid; }
.dx-top { page-break-inside: avoid; break-inside: avoid; }
.dx-step { vertical-align: top; padding: .6em; border-radius: .9em; background: var(--dx-soft); border: 1px solid var(--dx-line);
    border-top: .3em solid var(--sc, #9ca3af); page-break-inside: avoid; }
.dx-step--filler { background: transparent; border: 0; }
.dx-step__svg svg { display: block; width: 100%; height: auto; }
.dx-step__cap { margin: .5em 0 0; font-size: .78em; line-height: 1.45; }
.dx-step__cap .dx-num { width: 1.6em; height: 1.6em; line-height: 1.6em; font-size: .9em; margin-right: .2em; }
.dx-step__cap .dx-hand { font-size: .88em; }

/* ── legends ───────────────────────────────────────────────────────── */
.dx-legend { display: block; margin: .8em 0; padding: .55em .9em; border-radius: .85em; background: #f7f8fa; border: 1px solid #e6e8ec;
    font-size: .78em; line-height: 2.1; color: #374151; }
.dx-legend__title { display: inline-block; margin-right: 1em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #d22b2b; }
.dx-legend__group { display: inline-block; margin-right: 1.4em; white-space: nowrap; }
.dx-legend__group > b { margin-right: .5em; color: #111827; }
.dx-legend__group > .dx-num { width: 1.6em; height: 1.6em; line-height: 1.6em; margin-right: .15em; font-size: .9em; }
.dx-legend__txt { margin-left: .3em; }
.dx-legend__item { display: inline-block; margin-right: .9em; white-space: nowrap; }
.dx-legend__item:last-child { margin-right: 0; }
.dx-legend__item svg { vertical-align: middle; }
.dx-legend__pl { display: inline-block; margin-right: .6em; white-space: nowrap; }
.dx-legend__pl .dx-player { margin-right: .3em; }
.dx-legend .dx-player { font-size: .88em; }
.dx-q { display: inline-block; width: 1.45em; height: 1.45em; line-height: 1.35em; border-radius: 50%; text-align: center; font-weight: 800;
    background: #fff; border: 1px solid #111827; vertical-align: middle; }
.dx-legend--inline { margin: 0 0 1em; padding: .45em .9em; font-size: .74em; }
.dx-legend--inline .dx-num { width: 1.55em; height: 1.55em; line-height: 1.55em; margin-right: .12em; font-size: .9em; }
.dx-legend__item.dx-muted { white-space: normal; }

/* compact (admin side panels) */
.dx--compact .dx-figure { width: 38%; padding-right: 1em; }
.dx--compact .dx-title { font-size: 1.1em; }

/* builder: the ball being edited */
.dx-card.is-selected { box-shadow: 0 0 0 2px var(--sc, #111827), 0 4px 12px rgba(15, 23, 42, .12); }
.trn-builder__cards { margin: .5rem 0; }
.pe-preview__cards { font-size: .9em; }

/* ── plan picture (calendar cards) ─────────────────────────────────── */
.pp { --pp-h: 15rem; position: relative; padding: .55rem .55rem 1.5rem; border-radius: 1rem; background: #f4f6f8; border: 1px solid #e6e8ec; }
.pp__heads { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: .3rem; margin-bottom: .35rem; }
.pp__heads span { display: block; padding: .12rem .3rem; border-radius: .4rem; background: #fff; border-top: 3px solid var(--lc, #6b7280);
    font-size: .62rem; font-weight: 800; color: #374151; text-align: center; }
.pp__body { position: relative; height: var(--pp-h); }
.pp__block { position: absolute; box-sizing: border-box; padding: 1.5px; }
.pp__block::before { content: ""; position: absolute; inset: 1.5px; border-radius: .45rem; background: #fff; border: 1px solid rgba(17, 24, 39, .07);
    border-left: 4px solid var(--uc, #6b7280); }
.pp__block--free_play::before { background: repeating-linear-gradient(135deg, #dcfce7 0 6px, #fff 6px 12px); border-left-color: #16a34a; }
.pp__block--break::before { background: #eceff3; border-left-color: #94a3b8; }
.pp__title { position: relative; display: block; padding: .2rem .3rem 0 .6rem; font-size: .62rem; font-weight: 700; line-height: 1.15; color: #1f2937;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp__block.is-tiny .pp__title { padding-top: 0; font-size: .55rem; line-height: 1; }
.pp__thumb { position: absolute; left: .6rem; right: .3rem; top: 1.1rem; bottom: .3rem; display: flex; justify-content: center; }
.pp__thumb svg { height: 100%; width: auto; max-width: 100%; display: block; }
.pp__times { position: absolute; left: .65rem; right: .65rem; bottom: .35rem; display: flex; justify-content: space-between; font-size: .62rem; font-weight: 700; color: #6b7280; }

/* ── browsers: flex rows, hover states, animations, tooltips, zoom ─── */
@media screen {
    .dx-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
        transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, opacity .25s ease, border-color .25s ease; }
    /* no movement under the pointer: only light and shadow change */
    .dx-card:hover { box-shadow: 0 8px 22px rgba(15, 23, 42, .09); border-color: #d7dbe1; }
    .dx-card__head, .dx-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; line-height: 1.35; }
    .dx-card__head > *, .dx-card__chips > * { margin-right: 0; }
    .dx-card__chips { margin-top: .45em; }
    .dx-hand, .dx-spin, .dx-chip, .dx-num, .dx-player { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, background-color .2s ease; }
    .dx-hand:hover, .dx-spin:hover, .dx-chip:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .14); background-color: #fff; }
    .dx-num:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 40%, transparent); }

    /* the hovered ball: lifted in its list, the others stay back */
    .dx-cards.has-focus .dx-card:not(.is-ball-focus) { opacity: .45; }
    .dx-cards.has-focus .dx-card.is-ball-focus { box-shadow: 0 0 0 2px var(--sc), 0 10px 26px rgba(15, 23, 42, .12); }
    table.dx-steps.has-focus .dx-step:not(.is-ball-focus) { opacity: .5; }
    .dx-step { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, opacity .25s ease; }
    .dx-step:hover, table.dx-steps.has-focus .dx-step.is-ball-focus { box-shadow: 0 0 0 2px var(--sc), 0 12px 26px rgba(15, 23, 42, .12); background: #fff; }

    .dx-legend__group, .dx-legend__item { transition: color .2s ease; }
    .dx-legend [data-tip]:hover { color: #111827; }
    .dx-legend--inline { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; line-height: 1.5; padding: .6em .95em; }
    .dx-legend--inline .dx-legend__title, .dx-legend--inline .dx-legend__group { margin-right: 0; }
    .dx-legend--inline .dx-legend__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; white-space: normal; }
    .dx-legend--inline .dx-legend__group > b, .dx-legend--inline .dx-legend__item, .dx-legend--inline .dx-legend__pl { margin-right: 0; }

    .dx-card [data-tip], .dx-legend [data-tip], .dx-step [data-tip] { cursor: help; }

    /* tooltip */
    .trn-tip { position: fixed; left: 0; top: 0; z-index: 10000; max-width: 20rem; padding: .6rem .85rem .65rem; border-radius: .85rem;
        background: rgba(17, 24, 39, .96); color: #fff; font: 600 .82rem/1.45 Montserrat, Inter, system-ui, sans-serif; pointer-events: none;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .07); backdrop-filter: blur(6px);
        border-top: 3px solid var(--tip-accent, #d22b2b); opacity: 0; scale: .92;
        transition: opacity .16s ease, scale .2s cubic-bezier(.2, .9, .3, 1.2), transform .08s linear; }
    .trn-tip.is-on { opacity: 1; scale: 1; }

    /* parts of the picture */
    .dg .is-tip-hover { filter: drop-shadow(0 0 2.5px #fff) drop-shadow(0 0 6px rgba(255, 255, 255, .75)); }
    .dg .dg-hitline.is-tip-hover { filter: none; }

    /* small pictures grow */
    svg.dg, .pp { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, filter .3s ease; }
    svg.dg.is-zoomed, .pp.is-zoomed { transform: scale(1.03); filter: saturate(1.15); }
    .trn-zoom { position: fixed; z-index: 9999; box-sizing: border-box; padding: 1rem 1rem .75rem; border-radius: 1.4rem;
        background: rgba(255, 255, 255, .98); color: #111827; box-shadow: 0 34px 90px rgba(15, 23, 42, .38), 0 0 0 1px rgba(15, 23, 42, .06);
        opacity: 0; transform: scale(.5) translateY(6px); pointer-events: none;
        transition: opacity .22s ease, transform .38s cubic-bezier(.16, 1, .3, 1); }
    .trn-zoom.is-open { opacity: 1; transform: none; pointer-events: auto; }
    .trn-zoom__title { margin: 0 0 .6rem; font: 800 .98rem/1.25 Montserrat, Inter, system-ui, sans-serif; }
    .trn-zoom__body { border-radius: 1rem; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #ffffff, #e9eef5); padding: .5rem; }
    .trn-zoom__body svg { display: block; width: 100%; height: auto; max-height: 72vh; }
    .trn-zoom--plan .trn-zoom__body { padding: 0; background: none; }
    .trn-zoom--plan .pp { --pp-h: 26rem; }
    .trn-zoom--plan .pp__title { font-size: .78rem; }
    .trn-zoom__hint { margin: .55rem .2rem 0; font: 600 .72rem/1.35 Montserrat, Inter, system-ui, sans-serif; color: #6b7280; }

    .pp__block::before { transition: box-shadow .2s ease, transform .2s ease; }
    .pp:hover .pp__block:hover::before { box-shadow: 0 0 0 2px var(--uc, #6b7280); }

    @media (prefers-reduced-motion: reduce) {
        .dx-card, .dx-step, .dx-hand, .dx-spin, .dx-chip, .dx-num, .trn-zoom, .trn-tip, svg.dg, .pp, .pp__block::before { transition: none; }
        .dx-card:hover, .dx-step:hover, svg.dg.is-zoomed, .pp.is-zoomed { transform: none; }
    }
}

@media screen and (max-width: 640px) {
    .dx-top, .dx-figure, .dx-data { display: block; width: auto; }
    .dx-figure { max-width: 22rem; margin: 0 auto 1rem; padding: 0; }
    table.dx-steps, table.dx-steps tbody, table.dx-steps tr { display: block; width: auto; margin: 0; }
    table.dx-steps tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .dx-step { display: block; }
    .dx-step--filler { display: none; }
    .dx-hand, .dx-spin { white-space: normal; max-width: 100%; }
}
@media print { .trn-tip, .trn-zoom { display: none !important; } }

/* tags of a unit: minimum level (in its colour) and the unit's tags */
.dx-tags { display: inline; }
.dx-level, .dx-tag { display: inline-block; margin: 0 .35em .2em 0; padding: 0 .65em 0 .2em; border-radius: 1em; font-size: .74em; font-weight: 800;
    line-height: 1.85em; white-space: nowrap; vertical-align: middle; }
.dx-level { background: #fff; color: #111827; border: 1.5px solid #6b7280; border-color: var(--lc, #6b7280); }
.dx-level__chip { display: inline-block; min-width: 1.45em; margin-right: .4em; padding: 0 .3em; border-radius: 1em; text-align: center;
    background: #6b7280; background: var(--lc, #6b7280); color: #fff; line-height: 1.45em; }
.dx-level--all { padding-left: .65em; border-style: dashed; color: #6b7280; }
.dx-tag { padding: 0 .65em; background: #f1f4f8; color: #475569; font-weight: 700; }