/* FilmRunner custom overrides beyond Tailwind */

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f1117; }
::-webkit-scrollbar-thumb { background: #2a2d3e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6366f1; }

/* Details/summary arrow removal */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* Hide scrollbar on the index-card image carousel (still scrollable) */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Reference index grid: 1 column on mobile, 3 on >=640px by default. The
   grid-layout toggle overrides the >=640 count via an injected <style>; this is
   the no-JS / pre-toggle baseline. */
#resource-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  #resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Select option colors in dark context */
select option { background: #1a1d27; color: #f3f4f6; }

/* --- Lens Lab before/after comparison component (edge-in reveal) ------------
   Reusable across every Lens Lab pair. The base image defines the frame's size
   (so any aspect ratio works with no crop); the two 'after' overlays sit on top
   and are revealed from the top and bottom edges toward the sharp band by JS
   (static/js/lens_compare.js sets their mask-image). Both states share one frame
   — identical dimensions, so nothing shifts as it toggles. */
.lens-compare { display: flex; flex-direction: column; gap: 0.85rem; }
.lens-frame {
  position: relative; overflow: hidden;
  border: 1px solid #2a2d3e; border-radius: 12px; background: #000;
}
.lens-frame .lens-base { display: block; width: 100%; height: auto; }
.lens-frame .lens-over {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; will-change: opacity, mask-image;
  user-select: none; -webkit-user-select: none; pointer-events: none;
}

.lens-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.lens-toggle {
  font: inherit; font-size: 0.9rem; font-weight: 600; color: #fff;
  background: #6366f1; border: 1px solid #6366f1; border-radius: 8px;
  padding: 0.5rem 1rem; cursor: pointer; transition: background 0.15s;
}
.lens-toggle:hover { background: #4f46e5; }
.lens-toggle:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

.lens-scrub-wrap { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 180px; }
.lens-scrub {
  -webkit-appearance: none; appearance: none; flex: 1; height: 5px;
  border-radius: 99px; background: #2a2d3e; outline: none; cursor: pointer;
}
.lens-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: 3px solid #6366f1; cursor: grab;
}
.lens-scrub::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  border: 3px solid #6366f1; cursor: grab;
}
.lens-scrub:focus-visible { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4); }
.lens-state {
  font-size: 0.8rem; color: #9aa0b4; min-width: 6ch;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .lens-frame .lens-over { will-change: auto; }
}

/* --- Resources sidebar: collapse (desktop) + accordion + mobile drawer -------
   State lives as classes on <html> (fr-nav-collapsed, fr-acc-<category>,
   fr-drawer-open), set by a no-FOUC <head> script and toggled by
   static/js/resources_sidebar.js. CSS does all the showing/hiding so restored
   state never flashes. */
[data-accordion-chevron] { transition: transform 0.15s ease; transform: rotate(90deg); } /* expanded = points down */

/* Per-module accordion collapsed (fixed 3 lens modules) */
html.fr-acc-lens_focal_length [data-module="lens_focal_length"] [data-accordion-body],
html.fr-acc-lens_glass        [data-module="lens_glass"]        [data-accordion-body],
html.fr-acc-lens_specialty    [data-module="lens_specialty"]    [data-accordion-body] { display: none; }
html.fr-acc-lens_focal_length [data-module="lens_focal_length"] [data-accordion-chevron],
html.fr-acc-lens_glass        [data-module="lens_glass"]        [data-accordion-chevron],
html.fr-acc-lens_specialty    [data-module="lens_specialty"]    [data-accordion-chevron] { transform: rotate(0deg); }

/* Whole-sidebar collapse — desktop (>= md) only. Hides the rail; the content
   column (flex-1) reclaims the width. A slim "show" button appears in its place. */
[data-sidebar-expand] { display: none; }
@media (min-width: 768px) {
  html.fr-nav-collapsed [data-sidebar-rail] { display: none; }
  html.fr-nav-collapsed [data-sidebar-expand] { display: inline-flex; }
}

/* Mobile drawer (< md): the rail is a fixed off-canvas panel that slides in;
   >= md it's the normal static sidebar column (Tailwind md:w-56 md:shrink-0). */
@media (max-width: 767px) {
  [data-sidebar-rail] {
    position: fixed; top: 0; left: 0; bottom: 0; width: 16rem; z-index: 60;
    background: #0f1117; border-right: 1px solid #2a2d3e; padding: 1rem 0.75rem;
    overflow-y: auto; transform: translateX(-100%); transition: transform 0.2s ease;
  }
  html.fr-drawer-open [data-sidebar-rail] { transform: translateX(0); }
  [data-drawer-backdrop] {
    position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.55);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  html.fr-drawer-open [data-drawer-backdrop] { opacity: 1; pointer-events: auto; }
  body.fr-drawer-lock { overflow: hidden; }
}
@media (min-width: 768px) {
  [data-drawer-backdrop], [data-sidebar-hamburger] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-accordion-chevron], [data-sidebar-rail], [data-drawer-backdrop] { transition: none; }
}

/* Lens Lab — "The Focal Length Range" stepper: active focal-length button */
.fr-focal-btn[aria-pressed="true"] {
  border-color: #6366f1;
  box-shadow: inset 0 0 0 1px #6366f1;
}
