/* camera.css
   CSS specific to the Camera page (camera.html) only. Split out of
   styles.css to keep the site-wide stylesheet smaller — load this file
   only on pages that actually use these elements. Relies on the shared
   theme variables (--md-sys-color-*) defined in styles.css, so
   styles.css must be loaded first. */

/* Camera-page-only theme variables: background/border tint for the
   photo-actions pill (see .photo-actions-group below). */
:root,
[data-bs-theme="light"] {
    --photo-group-bg: rgba(25, 135, 84, 0.12);
    --photo-group-border: rgba(25, 135, 84, 0.4);
}
[data-bs-theme="dark"] {
    --photo-group-bg: rgba(40, 167, 69, 0.15);
    --photo-group-border: rgba(40, 167, 69, 0.45);
}

/* Camera live-preview container + output canvas */
.camera-container {
    position: relative;
    width: 100%;
    max-width: 250px; 
    margin: 0 auto;
    aspect-ratio: 9/16;
    background: #000;
    overflow: hidden;
    border-radius: 12px;
}
canvas#camera-output {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Round capture/record buttons (photo, share-photo, record).
   Named distinctly from the shared .btn-circle (styles.css) — that class
   is used by #share-fab on every page of the site, so this camera-only
   class keeps the two independent even though they currently look alike. */
.camera-btn-circle {
    width: 50px;       
    height: 50px;      
    padding: 0;        
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;    
    transition: transform 0.1s;
}
.camera-btn-circle:active {
    transform: scale(0.95); 
}

/* Groups the "save photo" and "share photo" buttons inside a rounded,
   light-green pill, visually indicating they're two variations of the same
   action (capturing a photo) and distinguishing them from the separate
   video-record button next to this group. */
.photo-actions-group {
    padding: 8px;
    border-radius: 50px;
    background-color: var(--photo-group-bg);
    border: 2px solid var(--photo-group-border);
}

/* Recording indicator pulse (record button while actively recording) */
.pulse-animation {
    animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Material 3 "S" Size Slider Override
   Spec: track height = 24dp, track radius = 8dp, handle height = 44dp.
   Handle width and icon size are scaled down proportionally from the
   previous "M" size (52dp handle / 32dp wide / 24px icon) so the handle
   doesn't look oversized against the thinner 24dp track. */
input[type=range].m3-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Prevents gray touch box on iOS */
    outline: none;
}

/* Track (24px height, 8px radius) - Overrides linear-gradient from styles.css */
input[type=range].m3-slider::-webkit-slider-runnable-track {
    height: 24px;
    background: var(--md-sys-color-surface-variant);
    border-radius: 8px;
}

input[type=range].m3-slider::-moz-range-track {
    height: 24px;
    background: var(--md-sys-color-surface-variant);
    border-radius: 8px;
}

/* WebKit Thumb/Handle (Mac, iOS, Chrome, Edge, Safari) */
input[type=range].m3-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    width: 27px;
    border: none;
    outline: none;
    border-radius: 8px;
    background-color: var(--md-sys-color-primary);
    margin-top: -10px; /* Offsets 44px handle onto 24px track */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23ffffff'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64a64 64 0 1 0 0 128 64 64 0 1 0 0-128z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* Dark-theme icon: swap the white fill for the theme's on-primary color
   (#381E72) so the icon stays legible against the lighter dark-mode
   thumb background (--md-sys-color-primary is #D0BCFF in dark mode). */
[data-bs-theme="dark"] input[type=range].m3-slider::-webkit-slider-thumb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23381E72'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64a64 64 0 1 0 0 128 64 64 0 1 0 0-128z'/%3E%3C/svg%3E");
}

/* Gecko Thumb/Handle (Firefox) */
input[type=range].m3-slider::-moz-range-thumb {
    height: 44px;
    width: 27px;
    border: none;
    outline: none;
    border-radius: 8px;
    background-color: var(--md-sys-color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23ffffff'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64a64 64 0 1 0 0 128 64 64 0 1 0 0-128z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* Dark-theme icon: same fill swap as the WebKit thumb above, for Firefox. */
[data-bs-theme="dark"] input[type=range].m3-slider::-moz-range-thumb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23381E72'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64a64 64 0 1 0 0 128 64 64 0 1 0 0-128z'/%3E%3C/svg%3E");
}