/* ===========================================
   Component Styles
   Cards, forms, buttons, toggles, uploads
   =========================================== */

/* Cards */
.card {
    background: var(--color-card-bg);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal);
}

.card-header {
    margin-bottom: var(--spacing-md);
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
}

.card-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.card-title-info {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.5rem;
}

/* Card header inline layout (title + control on same line) */
.card-header-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.card-header-inline .card-title {
    margin-bottom: 0;
}

/* Contact form */
.contact-form-section {
    max-width: 640px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.form-input {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-family: var(--font-family);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-card-bg);
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--font-family);
    color: white;
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
    align-self: flex-start;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.form-submit:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

.form-submit:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.form-submit:disabled {
    background: var(--color-text-muted);
    cursor: not-allowed;
}

/* Form success message */
.form-success {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

.form-success svg {
    color: var(--color-success);
    margin-bottom: var(--spacing-md);
}

.form-success h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.form-success p {
    font-size: 1rem;
    color: var(--color-text-muted);
}

/* Form status for aria-live announcements */
.form-status {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    min-height: 1.5em;
}

/* Projects section */
.projects {
    display: block;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 1000px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

.projects + .projects {
    margin-top: var(--spacing-lg);
}

.projects-section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.section-description {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.section-description a {
    color: var(--color-accent);
    text-decoration: none;
}

.section-description a:hover {
    text-decoration: underline;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.project-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.1);
    border-radius: 0.5rem;
    color: var(--color-accent);
}

.project-content {
    flex: 1;
}

.project-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
}

.project-description {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}

.project-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
}

.project-link:hover {
    text-decoration: underline;
}

.project-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Projects note/callout */
.projects-note {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-sm) 0;
    text-align: center;
}

.projects-note p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.projects-note a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
}

.projects-note a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .project-card {
        flex-direction: column;
    }

    .project-icon {
        width: 40px;
        height: 40px;
    }

    .project-icon svg {
        width: 24px;
        height: 24px;
    }
}

/* Toggle switch component */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border);
    transition: background-color var(--transition-normal), box-shadow var(--transition-fast);
    border-radius: 24px;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-card-bg);
    transition: transform var(--transition-normal);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-accent);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Small toggle switch variant */
.toggle-switch-sm {
    width: 36px;
    height: 20px;
}

.toggle-switch-sm .toggle-slider {
    border-radius: 20px;
}

.toggle-switch-sm .toggle-slider::before {
    height: 14px;
    width: 14px;
}

.toggle-switch-sm input:checked + .toggle-slider::before {
    transform: translateX(16px);
}

/* Toggle with label */
.toggle-with-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Upload area */
.upload-area {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    background: var(--color-control-bg);
}

.upload-area:hover {
    background-color: var(--color-accent-light);
    border-color: var(--color-accent);
}

.file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-icon {
    color: var(--color-text-muted);
    margin: 0 auto var(--spacing-sm);
    transition: color var(--transition-normal), transform var(--transition-normal);
}

.upload-area:hover .upload-icon {
    color: var(--color-accent);
    transform: translateY(-2px);
}

.upload-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    transition: color var(--transition-normal);
}

.upload-area:hover .upload-text {
    color: var(--color-accent);
}

.upload-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

/* Drag-over state for file upload */
.upload-area.drag-over {
    background-color: rgba(37, 99, 235, 0.05);
    border-color: var(--color-accent);
}

.upload-area.drag-over .upload-icon {
    color: var(--color-accent);
}

.upload-area.drag-over .upload-text {
    color: var(--color-accent);
}

/* Bookmarklet link */
.bookmarklet-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(37, 99, 235, 0.1);
    border-radius: 0.375rem;
    transition: background 0.2s ease;
    margin-top: var(--spacing-sm);
}

.bookmarklet-link:hover {
    background: rgba(37, 99, 235, 0.15);
}

/* Checkbox option */
.checkbox-option {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg);
    border-radius: 0.375rem;
    border: 1px solid var(--color-border);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.checkbox-label input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--color-accent);
}

/* Messages */
.message {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.error-message {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.debug-message {
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--color-accent);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 0.75rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.message-icon {
    flex-shrink: 0;
}

/* Metadata section */
.metadata-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.badge {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    padding: 0.25rem 0.5rem;
    background: var(--color-bg);
    border-radius: 0.25rem;
    white-space: nowrap;
}

.badge.wip {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
    font-weight: 500;
}

/* Icon button */
.icon-button {
    padding: var(--spacing-xs);
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.icon-button:hover {
    background: var(--color-text);
    color: var(--color-card-bg);
}

/* Placeholder */
.placeholder-container {
    background: var(--color-card-bg);
    border-radius: 0.75rem;
    border: 2px dashed var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    height: 500px;
}

@media (min-width: 1024px) {
    .placeholder-container {
        height: auto;
        flex: 1;
    }
}

.placeholder-icon {
    color: var(--color-border);
    margin-bottom: var(--spacing-sm);
}

.placeholder-text {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* About page - two column layout */
.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    min-height: 70vh;
}

.about-content-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.about-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.about-headline {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0;
}

.about-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.about-text p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0;
}

.about-cta {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--transition-normal), background-color var(--transition-normal);
    align-self: flex-start;
    margin-top: var(--spacing-sm);
}

.about-cta:hover {
    border-color: var(--color-text);
    background: var(--color-control-bg);
}

.about-photo-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-photo-col img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

@media (max-width: 900px) {
    .about-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        min-height: auto;
    }

    .about-headline {
        font-size: 2rem;
    }

    .about-photo-col {
        order: -1;
    }

    .about-photo-col img {
        max-width: 350px;
    }
}

@media (max-width: 600px) {
    .about-headline {
        font-size: 1.75rem;
    }

    .about-photo-col img {
        max-width: 280px;
    }
}

/* Works page - Table of Contents */
.toc {
    margin-bottom: var(--spacing-lg);
}

.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.toc a {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--color-control-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.toc a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: var(--color-card-bg);
}

/* Works page */
.works-section:first-of-type {
    margin-top: 0;
}

.works-section {
    margin-top: var(--spacing-lg);
}

.works-section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.work-item {
    margin-bottom: var(--spacing-xl);
}

.work-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.work-description {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* Responsive video embed */
.video-embed {
    position: relative;
    width: 70%;
    padding-bottom: 39.375%; /* 70% of 56.25% (16:9 aspect ratio) */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-control-bg);
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-md);
}

@media (max-width: 600px) {
    .video-embed {
        width: 100%;
        padding-bottom: 56.25%;
    }
}

/* SoundCloud audio embed */
.audio-embed {
    width: 70%;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.audio-embed iframe {
    width: 100%;
    height: 540px;
    border: none;
}

@media (max-width: 600px) {
    .audio-embed {
        width: 100%;
    }
}

/* Bandcamp audio embed */
.audio-embed.bandcamp {
    width: fit-content;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.audio-embed.bandcamp iframe {
    width: 600px;
    max-width: 100%;
    height: 340px;
    display: block;
}

.audio-embed.bandcamp.tall iframe {
    height: 470px;
}

/* Home page */
.home-hero {
    text-align: center;
    padding: var(--spacing-lg) 0;
    position: relative;
}

.home-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 400px;
    max-width: 1200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0,200 Q15,195 30,200 T60,200 Q75,190 90,200 T120,200 Q150,180 180,200 T240,200 Q300,120 360,200 T480,200 Q540,40 600,200 T720,200 Q780,120 840,200 T960,200 Q1005,160 1050,200 T1110,200 Q1125,180 1140,200 T1170,200 Q1185,195 1200,200' fill='none' stroke='%232563eb' stroke-width='2' opacity='0.08'/%3E%3Cpath d='M0,200 Q20,198 40,200 T80,200 Q110,185 140,200 T200,200 Q280,150 360,200 T520,200 Q560,80 600,200 T680,200 Q760,150 840,200 T1000,200 Q1030,185 1060,200 T1120,200 Q1160,198 1200,200' fill='none' stroke='%232563eb' stroke-width='1.5' opacity='0.06'/%3E%3Cpath d='M0,200 C20,200 40,205 60,205 S100,195 120,195 S160,210 200,220 S260,195 300,170 S360,220 400,260 S480,150 540,100 S580,200 600,200 S620,200 660,300 S720,350 760,260 S820,170 860,220 S920,200 960,195 S1020,210 1060,210 S1100,195 1140,195 S1180,205 1200,200' fill='none' stroke='%232563eb' stroke-width='1' opacity='0.05'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}

[data-theme="dark"] .home-hero::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0,200 Q15,195 30,200 T60,200 Q75,190 90,200 T120,200 Q150,180 180,200 T240,200 Q300,120 360,200 T480,200 Q540,40 600,200 T720,200 Q780,120 840,200 T960,200 Q1005,160 1050,200 T1110,200 Q1125,180 1140,200 T1170,200 Q1185,195 1200,200' fill='none' stroke='%233b82f6' stroke-width='2' opacity='0.12'/%3E%3Cpath d='M0,200 Q20,198 40,200 T80,200 Q110,185 140,200 T200,200 Q280,150 360,200 T520,200 Q560,80 600,200 T680,200 Q760,150 840,200 T1000,200 Q1030,185 1060,200 T1120,200 Q1160,198 1200,200' fill='none' stroke='%233b82f6' stroke-width='1.5' opacity='0.10'/%3E%3Cpath d='M0,200 C20,200 40,205 60,205 S100,195 120,195 S160,210 200,220 S260,195 300,170 S360,220 400,260 S480,150 540,100 S580,200 600,200 S620,200 660,300 S720,350 760,260 S820,170 860,220 S920,200 960,195 S1020,210 1060,210 S1100,195 1140,195 S1180,205 1200,200' fill='none' stroke='%233b82f6' stroke-width='1' opacity='0.08'/%3E%3C/svg%3E");
}

.home-hero h1 {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

.home-hero .subtitle {
    max-width: 500px;
    margin: 0 auto;
}

.home-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.home-link-card {
    display: block;
    padding: var(--spacing-md);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.home-link-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.home-link-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.home-link-card p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .home-hero h1 {
        font-size: 2.25rem;
    }

    .home-links {
        grid-template-columns: 1fr;
    }
}

/* ===========================================
   Focus States for Keyboard Navigation
   =========================================== */

/* Interactive cards and links */
.home-link-card:focus-visible,
.project-card:focus-visible,
.toc a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Form elements */
.form-submit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Buttons (used across project pages) */
.action-button:focus-visible,
.source-btn:focus-visible,
.scenario-btn:focus-visible,
.output-btn:focus-visible,
.waveform-btn:focus-visible,
.harmonic-btn:focus-visible,
.preset-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}