/* lineara.eu image comparator. Light theme only.
   Every rule is scoped under .lac so the site stylesheet stays in charge
   of the page around it. The component fills its container width and
   keeps the frame's aspect ratio (set inline from the manifest). */

.lac {
  --lac-ink: #1d1d1b;
  --lac-muted: #5d5b56;
  --lac-line: #cfcbc3;
  --lac-paper: #ffffff;
  --lac-ground: #f3f1ec;
  --lac-accent: #a4321f;
  --lac-focus: #1e5aa8;
  color: var(--lac-ink);
  background: var(--lac-paper);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.lac *, .lac *::before, .lac *::after { box-sizing: inherit; }
.lac [hidden] { display: none !important; }

.lac-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}

/* toolbar */
.lac-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  align-items: center;
  margin-bottom: .5rem;
}
.lac-modes {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.lac-modes legend {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.lac-radio { position: relative; }
.lac-radio input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.lac-radio label,
.lac button {
  display: inline-block;
  padding: .3rem .7rem;
  border: 1px solid var(--lac-line);
  border-radius: 4px;
  background: var(--lac-ground);
  color: var(--lac-ink);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}
.lac-radio input:checked + label,
.lac button[aria-pressed="true"] {
  background: var(--lac-ink);
  border-color: var(--lac-ink);
  color: var(--lac-paper);
}
.lac-radio input:disabled + label { opacity: .45; cursor: not-allowed; }
.lac-radio input:focus-visible + label,
.lac button:focus-visible,
.lac select:focus-visible,
.lac input[type="range"]:focus-visible,
.lac input[type="checkbox"]:focus-visible,
.lac-stage:focus-visible {
  outline: 3px solid var(--lac-focus);
  outline-offset: 2px;
}
.lac-handle:focus-visible { outline: none; }
.lac-handle:focus-visible::after { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--lac-focus); }

.lac-pick { display: flex; align-items: center; gap: .35rem; }
.lac-pick label { font-weight: 600; margin-left: .4rem; }
.lac select {
  font: inherit;
  padding: .25rem .4rem;
  border: 1px solid var(--lac-line);
  border-radius: 4px;
  background: var(--lac-paper);
  color: var(--lac-ink);
}
.lac-zoom { display: flex; gap: .25rem; margin-left: auto; }
.lac-zoom button { min-width: 2.2rem; }

/* per-mode controls */
.lac-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
  min-height: 1.8rem;
  margin-bottom: .5rem;
  color: var(--lac-muted);
}
.lac-range { display: inline-flex; align-items: center; gap: .5rem; }
.lac-range span { min-width: 5.5em; }
.lac-range input { width: 11rem; }
.lac-range output { min-width: 4em; font-variant-numeric: tabular-nums; }
.lac-blink { display: inline-flex; align-items: center; gap: .4rem; }

/* stage */
.lac-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--lac-ground);
  border: 1px solid var(--lac-line);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.lac-stage.lac-grabbing { cursor: grabbing; }
.lac-plane {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.lac-layer {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #fff;
}
.lac-layer.lac-clear { background: transparent; }
.lac-layer img {
  display: block;
  width: 100%; height: 100%;
  pointer-events: none;
  image-rendering: auto;
}
.lac-b { z-index: 2; }
.lac-a { z-index: 1; }

.lac-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--lac-accent);
  cursor: ew-resize;
  z-index: 4;
  touch-action: none;
}
.lac-handle::before {
  /* a wide invisible grip so a finger can find the divider */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -14px; right: -14px;
}
.lac-handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: var(--lac-accent);
  box-shadow: 0 0 0 2px #fff;
}
.lac-ring {
  position: absolute;
  border: 2px solid var(--lac-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #fff;
  pointer-events: none;
  z-index: 3;
}
.lac-tag {
  position: absolute;
  left: .4rem; bottom: .4rem;
  padding: .1rem .45rem;
  background: rgba(255, 255, 255, .85);
  color: var(--lac-ink);
  font-size: .8rem;
  border-radius: 3px;
  pointer-events: none;
  z-index: 5;
}

/* text under the stage */
.lac-status, .lac-help {
  margin: .4rem 0 0;
  font-size: .9rem;
  color: var(--lac-muted);
}
.lac-credits {
  margin: .6rem 0 0;
  padding-left: 1.1rem;
  font-size: .82rem;
  color: var(--lac-muted);
}
.lac-credits li { margin: .15rem 0; }

@media (max-width: 600px) {
  .lac-zoom { margin-left: 0; }
  .lac-range input { width: 8rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .lac-radio label, .lac button { transition: background-color .12s, color .12s; }
}