/* Clipped — in-browser app styles. Pairs with site.css. */

/* The HTML hidden attribute must always win over our display: flex/grid
   rules below — without !important the class selector out-specifics it. */
[hidden] { display: none !important; }

/* The Clipped page breaks out of the 880px content column so the player
   can stretch to the viewport width. */
body:has(.clipped-app) main {
    max-width: none;
    /* Equal padding on all four sides — the global main rule's asymmetric
       2.5rem top / 5rem bottom was leaving the page top-heavy and the page
       footer area weirdly tall. 1.5rem all around matches the horizontal
       gutter the user expects. */
    padding: 1.5rem;
}

.clipped-app {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* --panel-bg / --panel-border / --btn-* now live in site.css :root and
       theme-switch with the rest of the palette. */
}

/* Lucide icons inside the Clipped app. Same defaults as Music's icon
   class — single stroke, currentColor so they pick up button text color. */
.clipped-app .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Drop zone — taller, dashed border so it reads as "drop here" without
   needing to read the text. */
.drop-zone {
    border: 2px dashed var(--panel-border);
    border-radius: 6px;
    padding: 1.5rem 1.1rem;
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--fg-muted);
    background: var(--panel-bg);
    font-size: var(--text-sm);
    transition: border-color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.drop-zone.drag-over {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.dz-hint { color: var(--fg-dim); }

/* how-to / features panel — animated collapsible */
.how-to {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 0.85rem 1.1rem;
    color: var(--fg-muted);
    font-size: var(--text-sm);
}
/* Specificity .how-to > .how-to-summary (0,2,0) beats .clipped-app button
   (0,1,1) so we don't inherit the regular button's border/bg/padding. */
.how-to .how-to-summary {
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: left;
    user-select: none;
}
.how-to .how-to-summary::before { content: '// '; color: var(--fg-dim); }
.how-to .how-to-summary::after {
    /* Matches the .tools-chevron in the header — same glyph (▾),
       same em-relative size, same 180° flip on open. Keeps every
       expandable-thing chevron consistent across the site. */
    content: '\25BE'; /* ▾ */
    margin-left: 0.65rem;
    color: var(--fg-muted);
    font-size: 0.72em;
    display: inline-block;
    transition: transform var(--dur-med) var(--ease-smooth);
}
.how-to[data-open="true"] .how-to-summary::after { transform: rotate(180deg); }

/* The grid-template-rows: 1fr ↔ 0fr trick animates auto height smoothly. */
.how-to-content {
    display: grid;
    grid-template-rows: 1fr;
    transition:
        grid-template-rows var(--dur-med) var(--ease-smooth),
        opacity var(--dur-med) var(--ease-smooth),
        margin-top var(--dur-med) var(--ease-smooth),
        visibility 0s 0s;
    opacity: 1;
    margin-top: 0.85rem;
    visibility: visible;
}
.how-to[data-open="false"] .how-to-content {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    visibility: hidden;
    /* Defer visibility flip until the height/opacity animation completes
       so there's no ghost rectangle peeking through. */
    transition:
        grid-template-rows var(--dur-med) var(--ease-smooth),
        opacity var(--dur-med) var(--ease-smooth),
        margin-top var(--dur-med) var(--ease-smooth),
        visibility 0s var(--dur-med);
}
.how-to-inner { min-height: 0; overflow: hidden; }

.how-to ul {
    padding-left: 1.25rem;
    line-height: 1.7;
}
.how-to li { margin-bottom: 0.55rem; }
.how-to li:last-child { margin-bottom: 0; }
.how-to li::marker { color: var(--fg-dim); }
.how-to strong { color: var(--fg); font-weight: 600; }

/* buttons */
.clipped-app button {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 6px;
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.clipped-app button:hover:not(:disabled):not(.how-to-summary) {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--btn-bg-hover);
}
.clipped-app button:focus { outline: none; }
.clipped-app button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.clipped-app button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.clipped-app button.toggle.on {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
#export-btn:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
#export-btn:not(:disabled):hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* video stage */
.player { display: flex; flex-direction: column; gap: 0.5rem; }
.stage {
    position: relative;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    line-height: 0;
    width: 100%;
    aspect-ratio: 16 / 9;       /* default until a video loads — JS sets the real ratio */
    max-height: 78vh;
}
#video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
}
.stage-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-muted);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    pointer-events: none;
    line-height: 1.4;
}
#crop-canvas {
    position: absolute;
    top: 0; left: 0;
    cursor: move;
    user-select: none;
    touch-action: none;
}
.crop-toolbar {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 8px;
    z-index: 2;
}
.crop-toolbar button { font-size: 0.8rem; }

/* controls bar */
.controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.controls button {
    min-width: 32px;
    padding: 0.4rem 0.7rem;
}
.controls .time {
    font-size: 0.78rem;
    color: var(--fg-muted);
    margin-left: auto;
    white-space: nowrap;
}
#seek { flex: 1; min-width: 200px; }

/* volume */
.vol-wrap { display: flex; align-items: center; gap: 0.3rem; }
.vol-wrap #volume {
    width: 0;
    transition: width var(--dur-fast) var(--ease-smooth);
    opacity: 0;
}
.vol-wrap:hover #volume,
.vol-wrap:focus-within #volume {
    width: 90px;
    opacity: 1;
}

/* range inputs — flat, dark */
.clipped-app input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--panel-border);
    border-radius: 2px;
    outline: none;
}
.clipped-app input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}
.clipped-app input[type=range]::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

/* trim row — 2 rows × 6 columns, mirrors the desktop app's QGridLayout.
   The Controls panel wrapper (.how-to.controls-panel) supplies the bg + border +
   padding, so the grid itself is flat when nested. */
.trim-row {
    display: grid;
    grid-template-columns: auto auto auto auto 1fr auto;
    column-gap: 1rem;
    row-gap: 0.55rem;
    align-items: center;
}
/* Force buttons to fill their grid cell so paired buttons in the same column
   (Mark In/Out, Crop 9:16/16:9, Reset/Export) end up the same width. */
.trim-row > button {
    width: 100%;
    min-width: 0;
}
.time-display {
    font-size: 0.78rem;
    color: var(--fg-muted);
    white-space: nowrap;
}

/* status / progress */
.status {
    min-height: 1.2em;
    font-size: 0.78rem;
    color: var(--fg-muted);
}
.status:empty { min-height: 0; margin: 0; }
.status.warn { color: var(--status-warn); }
.status.err  { color: var(--status-err); }

.progress-wrap {
    height: 4px;
    background: var(--panel-bg);
    border-radius: 2px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width var(--dur-fast) var(--ease-quick);
}

/* small screens */
@media (max-width: 640px) {
    .controls { font-size: 0.78rem; }
    .controls .time { margin-left: 0; flex-basis: 100%; text-align: center; }
    .trim-row { grid-template-columns: 1fr 1fr; column-gap: 0.75rem; }
    .trim-row > button { justify-self: stretch; }
    .vol-wrap #volume,
    .vol-wrap:hover #volume { width: 70px; opacity: 1; }
}