/*
 * Shared styling for the browser-side video tools (/video-cutter, and
 * Stage C's /video-cropper). Built on the site's own design tokens from
 * a2z-tokens.css so the editor reads as part of A2Z.Tools rather than an
 * embedded third-party product.
 *
 * Accent: the alphabet-palette colour for the letter V (#f37859), with the
 * generated tool icon's tint and stroke shades, so the tool matches its own
 * icon and its neighbours in the A-Z grid.
 *
 * The site has no dark theme (a2z-tokens.css defines no prefers-color-scheme
 * block), so neither does this - adding one here alone would make these two
 * pages inconsistent with the other 500.
 */

.ve {
    --ve-accent: #f37859;
    --ve-accent-strong: #af5640;
    --ve-accent-soft: #fdece8;
    --ve-ink: var(--text-color, #23303d);
    --ve-muted: var(--text-muted, #667487);
    --ve-line: var(--card-border, #e3e8ef);
    --ve-surface: var(--card-background, #fff);
    --ve-surface-soft: var(--page-background-soft, #f7f9fc);
    --ve-radius: 14px;

    color: var(--ve-ink);
}

.ve *,
.ve *::before,
.ve *::after { box-sizing: border-box; }

/* No horizontal overflow at any width - the timeline is the usual culprit. */
.ve { max-width: 100%; overflow-x: hidden; }

.ve-card {
    background: var(--ve-surface);
    border: 1px solid var(--ve-line);
    border-radius: var(--ve-radius);
    padding: 18px;
    margin-bottom: 16px;
}

.ve-privacy {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--ve-accent-soft);
    border: 1px solid #f6d3c8;
    border-radius: var(--ve-radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
}
.ve-privacy i { color: var(--ve-accent-strong); margin-top: 2px; }

/* ---------------- file selection ---------------- */
.ve-drop {
    border: 2px dashed #cfd8e3;
    border-radius: var(--ve-radius);
    background: var(--ve-surface-soft);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.ve-drop:hover,
.ve-drop:focus-visible { border-color: var(--ve-accent); background: var(--ve-accent-soft); }
.ve-drop.is-dragging { border-color: var(--ve-accent-strong); background: var(--ve-accent-soft); }
.ve-drop-icon { font-size: 34px; color: var(--ve-accent); margin-bottom: 10px; }
.ve-drop-title { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.ve-drop-sub { color: var(--ve-muted); margin: 0 0 4px; font-size: 14px; }
.ve-drop-types { color: var(--ve-muted); font-size: 12.5px; margin: 8px 0 0; }

/* ---------------- layout ---------------- */
.ve-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 991px) { .ve-workspace { grid-template-columns: minmax(0, 1fr); } }

.ve-stage { background: #0f1620; border-radius: var(--ve-radius); overflow: hidden; }
.ve-stage video { display: block; width: 100%; max-height: 58vh; background: #0f1620; }
@media (max-width: 575px) { .ve-stage video { max-height: 40vh; } }

/* ---------------- meta ---------------- */
.ve-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ve-muted); margin-top: 10px; }
.ve-meta b { color: var(--ve-ink); font-weight: 600; }
.ve-filename { word-break: break-all; }

/* ---------------- timeline ---------------- */
.vt { margin-top: 14px; }
.vt-strip {
    position: relative;
    height: 76px;
    background: var(--ve-surface-soft);
    border: 1px solid var(--ve-line);
    border-radius: 10px;
    overflow: hidden;
    touch-action: none;            /* pointer drags must not scroll the page */
    cursor: pointer;
    user-select: none;
}
@media (max-width: 575px) { .vt-strip { height: 64px; } }

.vt-thumbs { position: absolute; inset: 0; display: flex; }
.vt-thumb { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; display: block; }

.vt-shade { position: absolute; top: 0; bottom: 0; background: rgba(15, 22, 32, .58); pointer-events: none; }
.vt-shade--before { left: 0; }
.vt-shade--after { right: 0; }

.vt-selection {
    position: absolute; top: 0; bottom: 0;
    border-top: 3px solid var(--ve-accent);
    border-bottom: 3px solid var(--ve-accent);
    pointer-events: none;
}

.vt-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
.vt-playhead-knob { position: absolute; top: -1px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }

/* Handles: visually slim, but with a large invisible touch target. */
.vt-handle {
    position: absolute; top: 0; bottom: 0;
    width: 44px;                    /* >= 44px touch target, per the a11y baseline */
    margin-left: -22px;
    padding: 0; border: 0; background: transparent;
    cursor: ew-resize;
    touch-action: none;
    display: flex; align-items: center; justify-content: center;
}
.vt-handle-grip {
    display: block; width: 12px; height: 100%;
    background: var(--ve-accent);
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15);
    position: relative;
}
.vt-handle-grip::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 2px; height: 18px; margin: -9px 0 0 -1px;
    background: rgba(255,255,255,.85); border-radius: 2px;
}
.vt-handle:focus-visible { outline: none; }
.vt-handle:focus-visible .vt-handle-grip { box-shadow: 0 0 0 3px rgba(243,120,89,.55); }
.vt-handle--end .vt-handle-grip { background: var(--ve-accent-strong); }

/* ---------------- controls ---------------- */
.ve-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.ve-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ve-field label { font-size: 12.5px; font-weight: 600; color: var(--ve-muted); }
.ve-field input[type="text"],
.ve-field select {
    min-height: 44px; padding: 8px 10px;
    border: 1px solid var(--ve-line); border-radius: 10px;
    background: #fff; color: var(--ve-ink); font-size: 15px;
    min-width: 0; width: 100%;
}
.ve-field input:focus-visible,
.ve-field select:focus-visible { outline: 2px solid var(--ve-accent); outline-offset: 1px; }
.ve-time-input { max-width: 130px; font-variant-numeric: tabular-nums; }

.ve-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 16px;
    border-radius: 10px; border: 1px solid var(--ve-line);
    background: #fff; color: var(--ve-ink);
    font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.ve-btn:hover { border-color: var(--ve-accent); color: var(--ve-accent-strong); }
.ve-btn:focus-visible { outline: 2px solid var(--ve-accent); outline-offset: 2px; }
.ve-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ve-btn--primary { background: var(--ve-accent); border-color: var(--ve-accent); color: #fff; }
.ve-btn--primary:hover { background: var(--ve-accent-strong); border-color: var(--ve-accent-strong); color: #fff; }
.ve-btn--ghost { background: transparent; }
.ve-btn--danger { border-color: #e0b4b4; color: #a33; }

.ve-duration {
    font-variant-numeric: tabular-nums;
    font-weight: 700; font-size: 15px;
    padding: 8px 12px; border-radius: 10px;
    background: var(--ve-accent-soft); color: var(--ve-accent-strong);
}

/* ---------------- settings panel ---------------- */
.ve-panel h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.ve-panel .ve-field { margin-bottom: 12px; }
.ve-mode { display: grid; gap: 8px; margin-bottom: 12px; }
.ve-mode-option {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1px solid var(--ve-line); border-radius: 10px;
    padding: 10px 12px; cursor: pointer;
}
.ve-mode-option:has(input:checked) { border-color: var(--ve-accent); background: var(--ve-accent-soft); }
.ve-mode-option:focus-within { outline: 2px solid var(--ve-accent); outline-offset: 1px; }
.ve-mode-option input { margin-top: 3px; }
.ve-mode-option[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ve-mode-name { font-weight: 600; font-size: 14.5px; display: block; }
.ve-mode-hint { font-size: 12.5px; color: var(--ve-muted); display: block; margin-top: 2px; }

/* ---------------- states ---------------- */
.ve-status { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-top: 12px; }
.ve-status--info { background: #eef4ff; color: #1f3d6d; }
.ve-status--warn { background: #fff6e6; color: #7a5200; }
.ve-status--error { background: #fdecec; color: #8f2020; }
.ve-status--ok { background: #eaf7ef; color: #17603a; }

.ve-progress { margin-top: 14px; }
.ve-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ve-progress-stage { font-weight: 600; font-size: 14.5px; }
.ve-progress-percent { font-variant-numeric: tabular-nums; color: var(--ve-muted); font-size: 14px; }
.ve-progress-track { height: 10px; border-radius: 999px; background: var(--ve-surface-soft); border: 1px solid var(--ve-line); overflow: hidden; }
.ve-progress-bar { height: 100%; width: 0; background: var(--ve-accent); transition: width .2s ease; }
.ve-progress-bar.is-indeterminate {
    width: 40%;
    animation: ve-slide 1.1s ease-in-out infinite;
}
@keyframes ve-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .ve-progress-bar { transition: none; }
    .ve-progress-bar.is-indeterminate { animation: none; width: 100%; opacity: .45; }
}

.ve-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--ve-accent-soft); border-top-color: var(--ve-accent);
    animation: ve-spin .8s linear infinite; flex: none;
}
@keyframes ve-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ve-spinner { animation-duration: 2.4s; } }

.ve-hidden { display: none !important; }

/* Screen-reader-only, matching the podcast studio's own utility. */
.ve-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------- result ---------------- */
.ve-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ---------------- SEO body ---------------- */
.ve-content h2 { font-size: 22px; font-weight: 700; margin: 28px 0 10px; }
.ve-content h3 { font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
.ve-content p, .ve-content li { font-size: 15px; line-height: 1.65; }
.ve-faq-item { border: 1px solid var(--ve-line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--ve-surface); }
.ve-faq-item summary { font-weight: 600; cursor: pointer; }
.ve-faq-item p { margin: 8px 0 0; color: var(--ve-muted); }

/* ==================================================================
   Crop overlay (/video-cropper)
   ================================================================== */

/* The stage is the positioning context: the overlay is absolutely placed
   over the <video> and sized from the video's own content box, so it never
   covers the letterbox bars. */
.ve-stage--crop { position: relative; }
.ve-stage--crop video { display: block; }

.vc-overlay { position: absolute; inset: 0; touch-action: none; }

/* Everything outside the crop is dimmed with one huge spread shadow rather
   than four separate panels - it cannot drift out of alignment with the
   rectangle because it IS the rectangle's shadow. */
.vc-shade { position: absolute; pointer-events: none; }

.vc-rect {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 0 9999px rgba(8, 12, 18, .55);
    cursor: move;
    touch-action: none;
    box-sizing: border-box;
}
.vc-rect:focus-visible { outline: 3px solid var(--ve-accent); outline-offset: 2px; }

/* Rule-of-thirds guides, off by default. */
.vc-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.vc-overlay--grid .vc-grid { opacity: 1; }
.vc-grid::before,
.vc-grid::after {
    content: ""; position: absolute; inset: 0;
    background-repeat: no-repeat;
}
.vc-grid::before {
    background-image: linear-gradient(to right, rgba(255,255,255,.55) 1px, transparent 1px),
                      linear-gradient(to right, rgba(255,255,255,.55) 1px, transparent 1px);
    background-position: 33.333% 0, 66.666% 0;
    background-size: 1px 100%, 1px 100%;
}
.vc-grid::after {
    background-image: linear-gradient(to bottom, rgba(255,255,255,.55) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,.55) 1px, transparent 1px);
    background-position: 0 33.333%, 0 66.666%;
    background-size: 100% 1px, 100% 1px;
}

/* Dimension badge. Sits above the rectangle, and flips inside when the crop
   is near the top edge so it never leaves the stage or hides a handle. */
.vc-size {
    position: absolute; top: -26px; left: 0;
    background: rgba(8, 12, 18, .82); color: #fff;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
    padding: 3px 7px; border-radius: 6px; white-space: nowrap;
    pointer-events: none;
}
.vc-rect--label-inside .vc-size { top: 6px; left: 6px; }

/* Handles: a small visible square with a much larger invisible hit area, so
   they look precise on a desktop and are still catchable with a thumb. */
.vc-handle {
    position: absolute;
    width: 44px; height: 44px;      /* touch target */
    margin: -22px 0 0 -22px;
    padding: 0; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center;
    touch-action: none;
}
.vc-handle::after {
    content: "";
    width: 14px; height: 14px;
    background: #fff;
    border: 2px solid var(--ve-accent-strong);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
/* Edge handles read as bars rather than corners. */
.vc-handle--n::after, .vc-handle--s::after { width: 26px; height: 10px; }
.vc-handle--e::after, .vc-handle--w::after { width: 10px; height: 26px; }

.vc-handle--nw { top: 0;    left: 0;    cursor: nwse-resize; }
.vc-handle--n  { top: 0;    left: 50%;  cursor: ns-resize; }
.vc-handle--ne { top: 0;    left: 100%; cursor: nesw-resize; }
.vc-handle--e  { top: 50%;  left: 100%; cursor: ew-resize; }
.vc-handle--se { top: 100%; left: 100%; cursor: nwse-resize; }
.vc-handle--s  { top: 100%; left: 50%;  cursor: ns-resize; }
.vc-handle--sw { top: 100%; left: 0;    cursor: nesw-resize; }
.vc-handle--w  { top: 50%;  left: 0;    cursor: ew-resize; }

/* ---------------- preset chips ---------------- */
.vc-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-preset {
    min-height: 44px; padding: 8px 14px;
    border: 1px solid var(--ve-line); border-radius: 999px;
    background: #fff; color: var(--ve-ink);
    font-size: 14px; font-weight: 600; cursor: pointer;
}
.vc-preset:hover { border-color: var(--ve-accent); color: var(--ve-accent-strong); }
.vc-preset:focus-visible { outline: 2px solid var(--ve-accent); outline-offset: 2px; }
.vc-preset.is-active {
    background: var(--ve-accent); border-color: var(--ve-accent); color: #fff;
}

/* ---------------- numeric crop fields ---------------- */
.vc-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 575px) { .vc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vc-fields input {
    width: 100%; min-height: 44px; padding: 8px 10px;
    border: 1px solid var(--ve-line); border-radius: 10px;
    font-size: 15px; font-variant-numeric: tabular-nums;
}
.vc-fields input:focus-visible { outline: 2px solid var(--ve-accent); outline-offset: 1px; }

.vc-output {
    display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
    margin-top: 12px; padding: 10px 12px;
    background: var(--ve-accent-soft); border-radius: 10px;
    font-size: 14px; color: var(--ve-accent-strong);
}
.vc-output b { font-variant-numeric: tabular-nums; font-size: 15px; }

/* ---------------- crop preview ---------------- */
.vc-preview { margin-top: 14px; }
.vc-preview canvas {
    display: block; max-width: 100%; height: auto;
    border-radius: 10px; background: #0f1620;
    margin: 0 auto;
}
.vc-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }