/*
 * Drill Media — the exercise filmstrip + inline thumbs.
 *
 * One visual contract, reused by every workout surface. Tokens come from
 * mobile-style/msd-mobile-style.php; fallbacks are inlined because some host
 * pages (gym builder, skill logger) scope their own local vars and don't
 * inherit the platform :root inside their shell.
 */

/* ── The rail ──────────────────────────────────────────────────────────── */

.cjdm-strip-wrap {
    margin: 0 0 var(--msd-space-md, 16px);
    max-width: 100%;
}

.cjdm-strip-eyebrow {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--msd-text-2, #7a7a7a);
    padding: 0 var(--msd-space-md, 16px);
    margin-bottom: 8px;
}

.cjdm-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px var(--msd-space-md, 16px) 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cjdm-strip::-webkit-scrollbar { display: none; }

/* ── The card ──────────────────────────────────────────────────────────── */

.cjdm-card {
    position: relative;
    flex: 0 0 116px;
    width: 116px;
    height: 116px;
    scroll-snap-align: start;
    border-radius: var(--msd-r-sm, 10px);
    overflow: hidden;
    background: var(--msd-bg-2, #0d0d0d);
    border: 1px solid var(--msd-border-2, #242424);
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: block;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--msd-transition-fast, 0.15s ease),
                transform var(--msd-transition-fast, 0.15s ease);
}
.cjdm-card:hover,
.cjdm-card:focus-visible {
    border-color: var(--msd-gold, #C9A84C);
    outline: none;
}
.cjdm-card:active { transform: scale(0.97); }

.cjdm-card-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Completed: drained of colour so the un-done work is what draws the eye. */
.cjdm-card.is-done .cjdm-card-img { filter: grayscale(1) brightness(0.5); }
.cjdm-card.is-done .cjdm-card-name { color: var(--msd-text-2, #7a7a7a); }
.cjdm-card.is-done .cjdm-card-meta { color: var(--msd-text-3, #3a3a3a); }
.cjdm-card.is-done { border-color: rgba(201, 168, 76, 0.22); }

/* The exercise you're on. */
.cjdm-card.is-current {
    border-color: var(--msd-gold, #C9A84C);
    border-width: 1px;
    box-shadow: 0 0 0 1px var(--msd-gold, #C9A84C);
}

/* ── Monogram fallback ─────────────────────────────────────────────────────
   No image is still a designed state. A half-filled library must not look
   half-broken, so the tile gets a deterministic tint + the drill's initials.

   The monogram is ALWAYS in the DOM, sitting underneath the image. If the
   image 404s — a deleted Bunny video, a clip still encoding, an unconfigured
   CDN — the <img> removes itself and this shows through. That's why you never
   see a broken-image icon in a rail. */

.cjdm-card-mono,
.cjdm-thumb-mono {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    user-select: none;
}
/* Card monogram sits in the image area only. The bottom offset is a percentage,
   not a fixed px, because the name plate grows when a drill name wraps to two
   lines — a fixed offset left the initials half-buried behind it. */
.cjdm-card-mono { font-size: 36px; inset: 0 0 42% 0; }
.cjdm-thumb-mono { font-size: 15px; letter-spacing: 1px; }

/* Five tints so a rail of image-less drills isn't monotonous, kept inside one
   near-black family so it still reads as the brand rather than a colour wheel.
   The initials are deliberately legible: this is a designed placeholder, not
   a smudge. */
.cjdm-tone-0 { background: #15140f; }
.cjdm-tone-0 .cjdm-card-mono, .cjdm-tone-0 .cjdm-thumb-mono { color: #544a2f; }
.cjdm-tone-1 { background: #0f1513; }
.cjdm-tone-1 .cjdm-card-mono, .cjdm-tone-1 .cjdm-thumb-mono { color: #33544a; }
.cjdm-tone-2 { background: #131313; }
.cjdm-tone-2 .cjdm-card-mono, .cjdm-tone-2 .cjdm-thumb-mono { color: #4c4c47; }
.cjdm-tone-3 { background: #0f1117; }
.cjdm-tone-3 .cjdm-card-mono, .cjdm-tone-3 .cjdm-thumb-mono { color: #3d4763; }
.cjdm-tone-4 { background: #16130e; }
.cjdm-tone-4 .cjdm-card-mono, .cjdm-tone-4 .cjdm-thumb-mono { color: #5a4a2c; }

/* ── Card furniture ────────────────────────────────────────────────────── */

/* The index gets the same dark chip as the ▶ badge. Without it, gold-on-a
   bright-gym-photo is unreadable — and photos are uncontrolled input. */
.cjdm-card-idx {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 3px 6px 2px;
    border-radius: 6px;
    background: rgba(7, 7, 7, 0.78);
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    color: var(--msd-gold, #C9A84C);
}

.cjdm-card-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
}
.cjdm-card-badge-play {
    background: rgba(7, 7, 7, 0.78);
    color: #efefef;
    padding-left: 2px; /* optically centre the ▶ glyph */
}
.cjdm-card-badge-done {
    background: var(--msd-gold, #C9A84C);
    color: #000;
    font-size: 12px;
    font-weight: 700;
}

/* Solid scrim, not a gradient — the name has to stay readable over a bright
   gym photo or a dark rink shot, and solids don't flash during DOM updates. */
.cjdm-card-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    padding: 16px 8px 7px;
    background: rgba(7, 7, 7, 0.82);
}

.cjdm-card-name {
    display: block;
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--msd-text, #efefef);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cjdm-card-meta {
    display: block;
    margin-top: 2px;
    font-family: var(--msd-font-sans, 'DM Sans', sans-serif);
    font-size: 11px;
    line-height: 1.2;
    color: var(--msd-text-2, #9a9a9a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Progress bar ──────────────────────────────────────────────────────────
   One segment per exercise. Turns the rail into a progress read at a glance,
   which is what earns it the screen space during a live session. */

.cjdm-strip-bar {
    display: flex;
    gap: 4px;
    padding: 6px var(--msd-space-md, 16px) 0;
}
.cjdm-strip-seg {
    flex: 1;
    height: 2px;
    background: var(--msd-border-2, #242424);
    transition: background var(--msd-transition-fast, 0.15s ease);
}
.cjdm-strip-seg.is-done { background: var(--msd-gold, #C9A84C); }

/* ── Inline thumb ──────────────────────────────────────────────────────── */

.cjdm-thumb {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    background: var(--msd-bg-3, #141414);
    border: 1px solid var(--msd-border-2, #242424);
    vertical-align: middle;
}
.cjdm-thumb img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Hero (weekly plan drill cards) ────────────────────────────────────── */

.cjdm-hero {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--msd-r-sm, 10px);
    overflow: hidden;
    background: var(--msd-bg-2, #0d0d0d);
    border: 1px solid var(--msd-border-2, #242424);
    margin-bottom: 8px;
}
.cjdm-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Frame picker (owner-only) ─────────────────────────────────────────── */

.cjdm-fp-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--msd-z-modal, 1000);
    background: rgba(0, 0, 0, 0.82);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.cjdm-fp-backdrop.is-open { display: flex; }

.cjdm-fp {
    width: 100%;
    max-width: 620px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--msd-bg-2, #0d0d0d);
    border: 1px solid var(--msd-border-2, #242424);
    border-radius: var(--msd-r-lg, 18px);
    padding: 18px;
}
.cjdm-fp h3 {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--msd-text, #efefef);
    margin: 0 0 4px;
}
.cjdm-fp-hint {
    font-family: var(--msd-font-sans, 'DM Sans', sans-serif);
    font-size: 12px;
    line-height: 1.5;
    color: var(--msd-text-2, #7a7a7a);
    margin: 0 0 12px;
}
.cjdm-fp-stage {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: var(--msd-r-sm, 10px);
    overflow: hidden;
    margin-bottom: 10px;
}
.cjdm-fp-stage video {
    width: 100%;
    max-height: 46vh;
    display: block;
    background: #000;
}
.cjdm-fp-scrub { width: 100%; margin: 0 0 12px; accent-color: var(--msd-gold, #C9A84C); }

.cjdm-fp-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cjdm-fp-btn {
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 10px 18px;
    border: 1px solid var(--msd-border-2, #242424);
    background: transparent;
    color: var(--msd-text, #efefef);
    cursor: pointer;
}
.cjdm-fp-btn-primary {
    background: var(--msd-gold, #C9A84C);
    color: #000;
    border-color: var(--msd-gold, #C9A84C);
}
.cjdm-fp-btn:disabled { opacity: 0.5; cursor: default; }

.cjdm-fp-msg {
    font-family: var(--msd-font-sans, 'DM Sans', sans-serif);
    font-size: 12px;
    color: var(--msd-text-2, #7a7a7a);
    margin-left: auto;
}
.cjdm-fp-msg.is-err { color: var(--msd-red, #ff5252); }
.cjdm-fp-msg.is-ok  { color: var(--msd-green, #3ecf8e); }

/* ── Responsive ────────────────────────────────────────────────────────────
   Mobile is full-bleed by house rule: the rail runs edge to edge and the
   scroll padding does the insetting, so cards peek off both sides. */

@media (max-width: 768px) {
    .cjdm-strip { padding-left: 14px; padding-right: 14px; }
    .cjdm-strip-eyebrow,
    .cjdm-strip-bar { padding-left: 14px; padding-right: 14px; }
    .cjdm-card { flex-basis: 108px; width: 108px; height: 108px; }
    .cjdm-card-mono { font-size: 30px; }
}

@media (min-width: 769px) {
    .cjdm-card { flex-basis: 128px; width: 128px; height: 128px; }
    .cjdm-card-name { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .cjdm-card,
    .cjdm-strip-seg { transition: none; }
    .cjdm-card:active { transform: none; }
}