/* WorkMirror Website Styles */

/* Engineer's Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

/* Mobile-friendly touch targets for buttons */
@media (max-width: 640px) {
    button,
    [role="button"],
    .touch-target {
        min-height: 44px;
    }
}

/* Heatmap box responsive styles */
.heatmap-box {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.125rem;
    background-color: #27272a;
}

@media (min-width: 640px) {
    .heatmap-box {
        width: 1rem;
        height: 1rem;
    }
}

/* Grid Pattern Background */
.bg-grid-pattern {
    background-image: linear-gradient(to right, #27272a 1px, transparent 1px),
                      linear-gradient(to bottom, #27272a 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}

/* Mockup Specific Styles */
.mockup-font { font-family: 'Inter', sans-serif; }
.conic-gradient-chart {
    background: conic-gradient(
        #6366f1 0% 58%,   /* Indigo: Coding */
        #0ea5e9 58% 82%,  /* Sky: Reading */
        #f59e0b 82% 100%  /* Amber: Meeting */
    );
}

/* Docs Prose Styles */
.prose h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: #ffffff; margin: 2rem 0 1.5rem; }
.prose h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #ffffff; margin: 2rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #27272a; }
.prose h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: #e4e4e7; margin: 1.5rem 0 0.75rem; }
.prose p { color: #a1a1aa; line-height: 1.75; margin: 0 0 1rem; }
.prose ul { list-style: disc outside; padding-left: 1.25rem; margin: 0 0 1rem; color: #a1a1aa; }
.prose li { margin: 0.5rem 0; }
.prose code { font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; background: #18181b; padding: 0.125rem 0.375rem; border-radius: 0.375rem; color: #d4d4d8; border: 1px solid #27272a; }
.prose pre { background: #18181b; padding: 1rem; border-radius: 0.75rem; overflow-x: auto; border: 1px solid #27272a; margin: 0 0 1.5rem; font-size: 0.875rem; line-height: 1.5rem; color: #d4d4d8; font-family: 'JetBrains Mono', monospace; }
.prose figure { margin: 1.5rem 0; }
.prose svg { display: block; background: #09090b; border: 1px solid #27272a; border-radius: 0.75rem; }
.prose figcaption { color: #71717a; font-size: 0.875rem; margin-top: 0.5rem; }
.prose details { background: rgba(24, 24, 27, 0.6); border: 1px solid #27272a; border-radius: 0.75rem; padding: 0.75rem 1rem; margin: 1rem 0; }
.prose summary { cursor: pointer; color: #d4d4d8; font-weight: 600; }
.prose details[open] summary { margin-bottom: 0.75rem; }

/* Navigation Active State */
.nav-active { color: #818cf8; background: rgba(99, 102, 241, 0.1); box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2); }