/* Capture screen and processing page styled after the native VFTCam apps (iOS CaptureView / StitchingView).
   Overrides capture.css and cards.css. Uses tokens from native-tokens.css. */

:root {
    --cap-reticle: 112px;
    --cap-ring: 76px;
    --cap-ring-stroke: 4px;
    --cap-round-btn: 48px;
    --cap-mint-dim: rgba(26, 236, 186, 0.25);
    --cap-scrim: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75));
    --cap-hold: 1000ms; /* app.js CAPTURE_DELAY */
}

/* ---------- Capture: full-screen view, no dashed frame ---------- */

#camera-viewport {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border: none;
    border-radius: 0;
}

/* Reticle: 112pt ring, amber until aligned, mint hold-progress arc, plus sign in the middle */
@property --cap-hold-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

#camera-viewport #alignment-indicator {
    width: var(--cap-reticle);
    height: var(--cap-reticle);
    box-sizing: border-box;
    border: 2px solid var(--vft-amber) !important;
    background: rgba(0, 0, 0, 0.18) !important;
    box-shadow: none;
    opacity: 1;
    animation: none;
    transition: border-color 0.2s ease;
}

#camera-viewport #alignment-indicator::before {
    content: '';
    position: absolute;
    inset: -3.5px;
    border-radius: 50%;
    background: conic-gradient(var(--vft-mint) var(--cap-hold-angle), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    opacity: 0;
}

#camera-viewport #alignment-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(#fff, #fff) center / 100% 1.5px no-repeat,
        linear-gradient(#fff, #fff) center / 1.5px 100% no-repeat;
}

#camera-viewport #alignment-indicator.aligned {
    border-color: var(--cap-mint-dim) !important;
}

#camera-viewport #alignment-indicator.holding::before {
    opacity: 1;
    animation: cap-hold var(--cap-hold) linear forwards;
}

@keyframes cap-hold {
    from { --cap-hold-angle: 0deg; }
    to { --cap-hold-angle: 360deg; }
}

/* Level indicator: iOS Camera style, two fixed ticks and a rotating line broken around the reticle */
#camera-viewport #roll-indicator {
    width: 300px;
    max-width: calc(100vw - 32px);
}

#roll-line-static-left,
#roll-line-static-right {
    width: 24px;
    background: rgba(255, 255, 255, 0.7);
}

#roll-line-moving {
    left: 32px;
    right: 32px;
    background: rgba(255, 255, 255, 0.7);
    -webkit-mask: linear-gradient(90deg, #000 25%, transparent 25% 75%, #000 75%);
    mask: linear-gradient(90deg, #000 25%, transparent 25% 75%, #000 75%);
}

#roll-line-moving.level {
    background: var(--vft-mint);
    box-shadow: none;
}

#roll-line-moving.tilted {
    background: var(--vft-amber);
}

/* ---------- Capture: bottom strip (Reset · progress ring · Gallery) ---------- */

.bottom-controls {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    transform: none;
    justify-content: space-between;
    padding: 48px 20px calc(var(--vft-safe-bottom) + 48px);
    background: var(--cap-scrim);
    font-family: var(--vft-font);
}

.bottom-controls .control-btn {
    width: var(--cap-round-btn);
    height: var(--cap-round-btn);
    border: none;
    background: rgba(0, 0, 0, 0.7);
    -webkit-tap-highlight-color: transparent;
}

.bottom-controls .control-btn svg,
.bottom-controls .control-btn img {
    width: 22px !important;
    height: 22px !important;
}

.bottom-controls .control-btn:hover {
    background: rgba(0, 0, 0, 0.85);
}

.bottom-controls .control-btn:focus-visible,
#capture-btn-container:focus-visible {
    outline: 2px solid var(--vft-blue);
    outline-offset: 3px;
}

/* Saved-photo progress ring: dark disc, faint track, amber arc, count in the middle; mint check when complete */
#capture-btn-container {
    width: var(--cap-ring);
    height: var(--cap-ring);
    border: var(--cap-ring-stroke) solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.7);
    -webkit-tap-highlight-color: transparent;
}

/* The SVG path sits at 88.4% of the box radius; this size puts it on the track's centre line. */
#captureProgress {
    top: 50%;
    left: 50%;
    width: calc((var(--cap-ring) - var(--cap-ring-stroke)) / 0.884);
    height: calc((var(--cap-ring) - var(--cap-ring-stroke)) / 0.884);
    transform: translate(-50%, -50%);
    border-radius: 0;
    overflow: visible;
}

#progressPath {
    stroke: var(--vft-amber);
    stroke-width: 1.8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.28s ease-out;
}

#capture-count {
    font-family: var(--vft-font-mono);
    font-size: var(--vft-fs-caption);
    font-weight: var(--vft-fw-semibold);
    color: var(--vft-text);
    pointer-events: none;
}

#captureCheckmark {
    display: none;
}

#capture-btn-container.is-complete #progressPath {
    stroke: var(--vft-mint);
}

#capture-btn-container.is-complete #capture-count {
    display: none;
}

#capture-btn-container.is-complete #captureCheckmark {
    display: block;
    width: 32px;
    height: 32px;
    fill: var(--vft-mint) !important;
}

/* Status line under the controls */
#instructions {
    top: auto;
    bottom: calc(var(--vft-safe-bottom) + 14px);
    left: 20px;
    right: 20px;
    transform: none;
    font-family: var(--vft-font);
    font-size: var(--vft-fs-subheadline);
    font-weight: var(--vft-fw-semibold);
    line-height: 1.25;
    color: var(--vft-text);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 31; /* above the bottom strip's scrim */
}

/* ---------- Processing page (stitching overlay) ---------- */

#stitching-overlay.ui-card {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: none;
    border: none;
    border-radius: 0;
    background: var(--vft-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    filter: none;
    padding: var(--vft-safe-top) 0 var(--vft-safe-bottom);
    box-sizing: border-box;
    font-family: var(--vft-font);
    color: var(--vft-text);
}

#stitching-overlay.ui-card.visible {
    transform: none;
}

#stitching-overlay.ui-card.background {
    transform: scale(0.97);
    filter: none;
}

#stitching-overlay.ui-card.lifting-in {
    animation: cap-page-in 250ms ease-out forwards;
}

#stitching-overlay.ui-card.pressing-down {
    animation: cap-page-out 300ms ease-in forwards;
}

@keyframes cap-page-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes cap-page-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(12px); }
}

#stitching-overlay .card-header,
#stitching-overlay .card-content {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    box-sizing: border-box;
    text-shadow: none;
}

#stitching-overlay .card-header {
    padding: 16px 76px 0 20px;
    text-align: left;
    border-bottom: none;
}

#stitching-overlay .stitch-eyebrow {
    margin: 12px 0 0;
}

#stitching-overlay .card-title {
    margin: 6px 0 0;
    font-size: var(--vft-fs-title);
    font-weight: var(--vft-fw-bold);
    line-height: 1.15;
    text-shadow: none;
}

#stitching-overlay .stitch-subtitle {
    margin: 6px 0 0;
    font-size: var(--vft-fs-subheadline);
    color: var(--vft-text-muted);
}

#stitching-overlay .card-close-btn {
    top: calc(var(--vft-safe-top) + 16px);
    right: 16px;
    width: var(--vft-icon-button);
    height: var(--vft-icon-button);
    border: none;
    border-radius: var(--vft-radius);
    background: var(--vft-fill-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#stitching-overlay .card-close-btn:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.16);
}

#stitching-overlay .card-close-btn:focus-visible {
    outline: 2px solid var(--vft-blue);
    outline-offset: 2px;
}

#stitching-overlay .card-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

/* Preview: 2:1 surface with the faint cyan grid, rounded and outlined */
#stitching-overlay .stitch-preview {
    margin: 0;
}

#stitching-overlay #preview-canvas {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--vft-border);
    border-radius: 16px;
    background-color: var(--vft-surface);
    background-image:
        linear-gradient(var(--vft-grid-line) 0.5px, transparent 0.5px),
        linear-gradient(90deg, var(--vft-grid-line) 0.5px, transparent 0.5px);
    background-size: 36px 36px;
}

#stitching-overlay .stitch-preview figcaption {
    margin-top: 8px;
    font-size: var(--vft-fs-caption);
    color: var(--vft-text-muted);
}

/* Progress: stage line, thin yellow bar, caption */
#stitching-overlay .stitching-progress {
    margin: 0;
}

#stitching-overlay #stitch-status {
    margin: 0 0 10px;
    text-align: left;
    font-size: var(--vft-fs-subheadline);
    font-weight: var(--vft-fw-semibold);
    color: var(--vft-text);
}

#stitching-overlay .progress-bar {
    width: 100%;
    height: 4px;
    margin: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none;
}

#stitching-overlay #stitch-progress-bar {
    border-radius: 2px;
    background: var(--vft-yellow);
    box-shadow: none;
}

#stitching-overlay #stitch-progress-bar::after {
    content: none;
}

#stitching-overlay #stitch-details {
    margin: 10px 0 0;
    text-align: left;
    font-size: var(--vft-fs-caption);
    color: var(--vft-text-muted);
}

/* Result actions: primary View, Share/Adjust row, plain New capture/Gallery links */
#stitching-overlay .stitch-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#stitching-overlay .stitch-actions-row {
    display: flex;
    gap: 12px;
}

#stitching-overlay .stitch-actions-row .vft-btn {
    flex: 1;
    padding: 0 12px;
}

#stitching-overlay .stitch-actions img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

#stitching-overlay .stitch-actions-links {
    display: flex;
    gap: 16px;
}

#stitching-overlay .stitch-actions-links button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--vft-touch-min);
    padding: 0 8px;
    border: none;
    border-radius: var(--vft-radius-sm);
    background: none;
    color: var(--vft-text);
    font-family: var(--vft-font);
    font-size: var(--vft-fs-subheadline);
    font-weight: var(--vft-fw-semibold);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#stitching-overlay .stitch-actions-links button:active {
    opacity: 0.7;
}

#stitching-overlay .stitch-actions-links button:focus-visible {
    outline: 2px solid var(--vft-blue);
    outline-offset: 2px;
}

/* State: busy vs complete (classes set by app.js lock/unlock and on successful save) */
#stitching-overlay .stitch-when-done {
    display: none;
}

#stitching-overlay.is-complete .stitch-when-done {
    display: inline;
}

#stitching-overlay.is-complete .stitch-when-busy,
#stitching-overlay.is-complete #stitch-status,
#stitching-overlay.is-complete .progress-bar {
    display: none;
}

#stitching-overlay .stitch-when-failed,
#stitching-overlay.is-failed .stitch-when-busy {
    display: none;
}

#stitching-overlay.is-failed .stitch-when-failed {
    display: inline;
}

#stitching-overlay.is-failed #stitch-status,
#stitching-overlay.is-failed .progress-bar,
#stitching-overlay.is-failed #view-btn,
#stitching-overlay.is-failed .stitch-actions-row {
    display: none;
}

#stitching-overlay.is-complete #stitch-details {
    margin-top: 0;
}

#stitching-overlay.is-processing #view-btn,
#stitching-overlay.is-processing .stitch-actions-row,
#stitching-overlay.is-processing #start-new-capture-btn {
    display: none;
}

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
    /* Keep functional hold progress, in steps instead of a smooth sweep */
    #camera-viewport #alignment-indicator.holding::before {
        animation-duration: var(--cap-hold) !important;
        animation-timing-function: steps(4, end) !important;
    }

    #stitching-overlay.ui-card.lifting-in,
    #stitching-overlay.ui-card.pressing-down {
        animation: none !important;
    }
}

@media (prefers-contrast: more) {
    .bottom-controls {
        background: #000;
    }

    .bottom-controls .control-btn,
    #capture-btn-container {
        background: #000;
    }

    #capture-btn-container {
        border-color: rgba(255, 255, 255, 0.55);
    }

    #camera-viewport #alignment-indicator {
        background: rgba(0, 0, 0, 0.5) !important;
    }

    #stitching-overlay .stitch-subtitle,
    #stitching-overlay #stitch-details,
    #stitching-overlay .stitch-preview figcaption {
        color: #e6e6e5;
    }
}