/* Laser Clip Maker on the app design system (the kit's app.css, injected on /app/*): only what is specific to this
   tool. Tokens only (var(--mk-…)); the preview canvas keeps its own wood colours because it is the video itself. */
.lcm [hidden] { display: none !important; }
.lcm .lcm-set { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lcm .lcm-set legend { padding: 0; margin-bottom: 6px; }

/* format cards: 2 × 2 radios, the checked one carries the accent */
.lcm .lcm-fmts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lcm .lcm-fmt { min-height: 64px; }
.lcm .lcm-fmt__title { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; font-weight: 600; color: var(--mk-text); white-space: nowrap; }
.lcm .lcm-fmt small { font-size: var(--mk-fs-xs); line-height: 1.35; color: var(--mk-text-3); }
.lcm .lcm-fmt:has(input:checked) small { color: var(--mk-accent-ink); }
.lcm .lcm-fmt:has(input:focus-visible) { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
.lcm .lcm-free-tag { display: inline-flex; padding: 2px 6px; border-radius: var(--mk-r-sm); background: var(--mk-ok-bg); color: var(--mk-ok); font: 700 11px/1.2 var(--mk-font); letter-spacing: 0.02em; }
@media (max-width: 359px) { .lcm .lcm-fmts { grid-template-columns: minmax(0, 1fr); } }

.lcm .lcm-check small { margin-top: 2px; }
.lcm .lcm-card > summary .mk-pro-tag { margin-left: 2px; }
.lcm .lcm-warn { flex-direction: column; gap: 2px; margin: 0; padding-left: var(--mk-s-4); list-style: disc; }
.lcm .lcm-status:empty { display: none; }

/* action bar: progress and cancel live in it while a video is made */
.lcm .lcm-actions { gap: var(--mk-s-1); }
.lcm .lcm-actions > .mk-btn--primary { flex: 1 1 100%; }
.lcm .lcm-actions > .mk-btn--primary.is-locked { background: var(--mk-accent); border-color: var(--mk-accent); color: var(--mk-on-accent) !important; }
.lcm .lcm-actions > .mk-btn--primary.is-locked .mk-pro-tag { background: var(--mk-surface); }
.lcm .lcm-progress { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }
.lcm .lcm-progress .mk-progress > span { transition: width 150ms linear; }
.lcm .lcm-savebar { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: var(--mk-s-1); margin: 0; font-size: var(--mk-fs-xs); color: var(--mk-text-3); }
.lcm .lcm-savebar .lcm-link { min-height: 32px; padding: 0 var(--mk-s-2); border: 0; border-radius: var(--mk-r-md); background: none; font: 600 var(--mk-fs-sm)/1 var(--mk-font); color: var(--mk-accent-ink); cursor: pointer; }
.lcm .lcm-savebar .lcm-link:hover { background: var(--mk-accent-soft); }
@media (max-width: 1023px) { .lcm .lcm-actions--float .lcm-savebar { display: none; } }

/* preview: the clip on its own, centred; the canvas keeps the video's wood colours */
.lcm .lcm-stage { min-height: 0; padding: var(--mk-s-3); }
.lcm .lcm-frame { position: relative; width: 100%; max-width: min(100%, 640px); aspect-ratio: 1 / 1; margin: 0 auto; border-radius: var(--mk-r-md); overflow: hidden; background: #2c1e14; box-shadow: var(--mk-shadow-2); }
.lcm .lcm-canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.lcm .lcm-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: var(--mk-shadow-2); }
.lcm .lcm-pvsize { font: 500 var(--mk-fs-xs)/1 var(--mk-font-mono); color: var(--mk-text-3); }
@media (min-width: 1024px) {
  .lcm .lcm-right { position: sticky; top: calc(var(--mk-head-h, 56px) + var(--mk-s-4)); }
  .lcm .lcm-frame { max-width: min(100%, calc(100dvh - var(--mk-head-h, 56px) - 200px)); }
}
@media (max-width: 1023px) { .lcm .lcm-frame { max-width: min(100%, 52vh); } }

.lcm .lcm-video { display: block; width: auto; max-width: 100%; margin: 0 auto; max-height: min(70vh, 560px); border-radius: var(--mk-r-md); background: #000; }

/* the Pro card when Pro is on: still opens, to remove the key */
.lcm .lcm-pro.is-owned > summary { cursor: pointer; }
.lcm .lcm-pro.is-owned > summary::after { display: block; background: var(--mk-ok); }
.lcm .mk-samples__label { flex-basis: 100%; }

/* work-around for a kit specificity bug: `.mk-btn:hover:not(:disabled):not([aria-disabled])` beats the primary hover,
   so a hovered primary turned grey with white text. Remove once app.css fixes it. */
.mk-app-mode .mk-app .mk-btn--primary:hover:not(:disabled):not([aria-disabled='true']) { background: var(--mk-accent-hover); border-color: var(--mk-accent-hover); }