/* JOV Cleaner's windows on its landing page (web/get/live.css has the stage and the chrome): the
   Cleanup page in the hero, Duplicates beside a row. Sizes in canvas em. */
.lv-cleaner, .lv-tile[data-live="dupes"] { --wall: #0b3f86; --wall-2: #2a7be0; --c-blue: #0b5fc5; }
@media (prefers-color-scheme: dark) { .lv-cleaner { --wall: #061a38; --wall-2: #12407c; --c-blue: #2f7be6; } }
.lv-cleaner .lv-ticon, .lv-tile[data-live="dupes"] .lv-ticon { display: none; }
.lv-cleaner .lv-win { left: 10em; top: 4.6em; width: 92em; height: 62em; transform: scale(0.96); }
.lv-cleaner .w-open .lv-win { transform: none; }
.lv-cleaner .lv-cv.is-close .lv-win { transform: scale(0.96); }
[data-scene="cleaner"] .c-ui { display: flex; flex-direction: row; }
.c-side { display: grid; align-content: start; gap: 0.2em; width: 18em; padding: 1.4em 1em; border-right: 1px solid var(--w-line); background: var(--w-bar); }
.c-side span { padding: 0.45em 0.8em; border-radius: 0.5em; font-size: 1.25em; transition: background-color var(--m-base), color var(--m-base); }
.c-side .on { background: var(--w-hit); }
.c-hist .c-hi { background: var(--w-sel); color: var(--w-blue); }
.c-main { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 2em 2.6em 0; }
.c-head { display: flex; align-items: center; justify-content: space-between; }
.c-head b { font: 700 2.6em/1.2 var(--display); }
.c-again { border: 1px solid var(--w-line); }
.c-disk { margin: 1.2em 0 1em; }
.c-disk small { color: var(--w-mut); font-size: 1.1em; }
.c-disk i { position: relative; display: block; height: 1em; margin-top: 0.4em; overflow: hidden; border-radius: 0.5em; background: var(--w-grid); }
.c-disk b { position: absolute; inset: 0; background: var(--c-blue); transform: scaleX(0.7); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.lv-cv:not(.c-clean) .c-disk b { transform: scaleX(0.78); }
.c-disk em { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.8), transparent); opacity: 0; }
.c-scan .c-disk em { opacity: 1; animation: c-sweep 900ms linear infinite; }
@keyframes c-sweep { from { transform: translateX(-100%); } to { transform: translateX(500%); } }
.c-safe { display: flex; justify-content: space-between; padding-bottom: 0.5em; border-bottom: 1px solid var(--w-line); font-size: 1.4em; opacity: 0; transition: opacity var(--m-base); }
.c-rows .c-safe { opacity: 1; }
.c-row { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 1em; align-items: center; padding: 0.7em 0.4em; border-bottom: 1px solid var(--w-grid);
  opacity: 0; transform: translateY(0.6em); transform-origin: top; transition: opacity var(--m-base), transform var(--m-base) var(--ease-out); }
.c-rows .c-row { opacity: 1; transform: none; }
.c-row:nth-child(2) { transition-delay: 60ms; } .c-row:nth-child(3) { transition-delay: 120ms; } .c-row:nth-child(4) { transition-delay: 180ms; } .c-row:nth-child(5) { transition-delay: 240ms; } .c-row:nth-child(6) { transition-delay: 300ms; }
.c-row b, .u-row b { display: block; font-size: 1.3em; font-weight: 600; }
.c-row small, .u-row small { display: block; color: var(--w-mut); font-size: 1.1em; }
.c-size { font-size: 1.3em; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.c-size small { font-weight: 400; }
.c-box { position: relative; width: 1.5em; height: 1.5em; border-radius: 0.35em; background: var(--c-blue); }
.c-box::after { content: ""; position: absolute; left: 0.5em; top: 0.2em; width: 0.4em; height: 0.8em; border: solid #fff; border-width: 0 0.18em 0.18em 0; transform: rotate(45deg); }
.c-wait .c-box, .u-keep .c-box { background: none; box-shadow: inset 0 0 0 1px var(--w-mut); }
.c-wait .c-box::after, .u-keep .c-box::after { display: none; }
.c-wait small { color: #c25e00; }
.c-lock { grid-template-columns: 2.2em 1fr; margin-top: 0.6em; border: 0; border-radius: 0.6em; background: var(--w-bar); color: var(--w-mut); }
.c-lock svg { width: 1.5em; height: 1.5em; }
.c-clean .c-row:not(.c-wait, .c-lock) { opacity: 0; transform: translateX(3em) scaleY(0.4); transition-duration: 500ms; }
.c-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; height: 5em; margin-top: auto; border-top: 1px solid var(--w-line); }
.c-path { position: relative; flex: 1; height: 1.5em; overflow: hidden; color: var(--w-mut); font: 1.1em var(--font-mono); }
.c-path span { position: absolute; left: 0; opacity: 0; white-space: nowrap; }
.c-scan .c-path span { animation: c-path 1.2s steps(1) infinite; }
.c-path span:nth-child(2) { animation-delay: 300ms; } .c-path span:nth-child(3) { animation-delay: 600ms; } .c-path span:nth-child(4) { animation-delay: 900ms; }
@keyframes c-path { 0% { opacity: 1; } 25% { opacity: 0; } }
.c-go { margin-left: auto; }
.c-go, .u-go, .u-ok { padding: 0 1.4em; background: var(--c-blue); color: #fff; }
.c-free { position: absolute; left: 50%; top: 56%; display: grid; justify-items: center; font-size: 1.6em; opacity: 0; transform: translate(-50%, -50%) scale(0.9); transition: opacity var(--m-base), transform var(--m-slow) var(--ease-pop); }
.c-free b { color: var(--c-blue); font: 700 3em/1.05 var(--display); font-variant-numeric: tabular-nums; }
.c-freed .c-free { opacity: 1; transform: translate(-50%, -50%); }
.c-card { position: absolute; right: 2.4em; bottom: 6.6em; display: grid; padding: 0.9em 1.3em; border-radius: 0.8em; background: var(--w-bg); box-shadow: 0 0 0 1px var(--w-line), 0 1em 2.4em -1em rgb(0 0 0 / 0.35);
  font-size: 1.2em; opacity: 0; transform: translateX(2em); transition: opacity var(--m-base), transform var(--m-slow) var(--ease-out); }
.c-hist .c-card { opacity: 1; transform: none; }

/* Duplicates: one copy stays, the others go to the Trash. */
.u-body { padding: 1.6em 2em; background: var(--w-page); }
.u-h { margin: 0 0 0.8em; }
.u-h b { display: block; font: 700 2em/1.2 var(--display); }
.u-h small { color: var(--w-mut); font-size: 1.15em; }
.u-row { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 1em; align-items: center; padding: 0.6em 0; border-bottom: 1px solid var(--w-grid); font-size: 1.1em;
  opacity: 0; transform: translateY(0.6em); transition: opacity var(--m-base), transform 700ms var(--ease-inout); }
.u-found .u-row { opacity: 1; transform: none; }
.u-keep > span:last-child { color: var(--w-blue); font-weight: 600; }
.u-trash .u-row:not(.u-keep) { opacity: 0; transform: translate(18em, 9em) scale(0.2); }
.u-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.2em; font-size: 1.15em; }
.u-alert { position: absolute; left: 50%; top: 45%; z-index: 5; display: grid; gap: 0.5em; justify-items: center; width: 30em; padding: 1.6em; border-radius: 1em; background: var(--w-bg);
  box-shadow: 0 0 0 1px var(--w-line), 0 1.6em 3em -1em rgb(0 0 0 / 0.4); font-size: 1.15em; text-align: center; opacity: 0; transform: translate(-50%, -50%) scale(0.95); transition: opacity var(--m-fast), transform var(--m-base) var(--ease-pop); }
.u-ask .u-alert { opacity: 1; transform: translate(-50%, -50%); }
.u-bin { position: absolute; right: 2.4em; bottom: 1.6em; width: 3.6em; height: 4.4em; }
.u-trash .u-bin { animation: lv-bounce 700ms 500ms var(--ease-out); }

@media (max-width: 639px) {
  .lv-cleaner .lv-fit { aspect-ratio: 4 / 5; }
  .lv-cleaner .lv-win { left: 0.8em; top: 3em; width: 38.4em; height: 46em; }
  .c-side, .c-row small, .c-path { display: none; }
  .c-main { padding: 1.4em 1.4em 0; }
  .c-free { font-size: 1.3em; }
  /* In the footer, left of Clean (the path line is hidden here), clear of the protected row. */
  .c-card { left: 1.2em; right: auto; bottom: 0.5em; padding: 0.5em 0.9em; font-size: 1em; }
  .u-trash .u-row:not(.u-keep) { transform: translate(8em, 9em) scale(0.2); }
}

/* Beside "You see the list before anything is removed": the dashboard, then Review & Clean. */
.lv-tile[data-live="dash"] { --c-blue: #0b5fc5; }
@media (prefers-color-scheme: dark) { .lv-tile[data-live="dash"], .lv-tile[data-live="dupes"] { --c-blue: #2f7be6; } }
.lv-tile[data-live="dash"] .lv-ticon { display: none; }
.h-body { display: grid; align-content: start; gap: 0.8em; padding: 1.4em 2em; background: var(--w-page); }
.h-top { display: flex; align-items: baseline; justify-content: space-between; }
.h-top b { font: 700 2.2em/1.2 var(--display); }
.h-ok { display: inline-flex; align-items: center; gap: 0.4em; color: var(--w-mut); font-size: 1.1em; }
.h-ok::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: #2e9b57; }
.h-card { position: relative; display: grid; align-content: start; gap: 0.2em; padding: 0.9em 1.2em; overflow: hidden; border-radius: 0.8em; background: var(--w-bar); box-shadow: inset 0 0 0 1px var(--w-line); }
.h-card small { color: var(--w-mut); font-size: 1.05em; font-weight: 600; }
.h-card strong { font: 700 1.8em/1.15 var(--display); font-variant-numeric: tabular-nums; }
.h-safe strong { font-size: 3.2em; }
.h-when { position: absolute; right: 1.2em; top: 0.9em; color: var(--w-mut); font-size: 1.05em; opacity: 0; transition: opacity var(--m-base); }
.h-read .h-when { opacity: 1; }
.h-sub { color: var(--w-mut); font-size: 1.1em; }
.h-btns { display: flex; gap: 0.5em; margin-top: 0.4em; }
.h-btns .lv-btn { border: 1px solid var(--w-line); background: var(--w-bg); }
.h-safe::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 25%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent); opacity: 0; pointer-events: none; }
.h-scan .h-safe::after { opacity: 1; animation: c-sweep 900ms linear infinite; }
.h-trash { display: flex; justify-content: space-between; font-size: 1.15em; }
.h-trash span { color: var(--w-mut); }
.h-sys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8em; }
.h-of { color: var(--w-mut); font-size: 1.05em; }
.h-sp { width: 100% !important; height: 2.6em !important; margin-top: 0.3em; }
.h-sp path { fill: none; stroke: var(--c-blue); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1200ms var(--ease-inout); }
.h-read .h-sp path { stroke-dashoffset: 0; }
.h-norm { color: #2e9b57; font-size: 1.5em !important; }
.h-bar { display: block; height: 0.6em; margin-top: 0.6em; border-radius: 0.3em; background: linear-gradient(90deg, #2e9b57 0 55%, #e3a008 55% 80%, #d6336c 80%); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out); }
.h-read .h-bar { transform: none; }
.h-pop { position: absolute; left: 50%; top: 50%; z-index: 5; display: grid; gap: 0.4em; width: 36em; padding: 1.4em 1.6em; border-radius: 1em; background: var(--w-bg);
  box-shadow: 0 0 0 1px var(--w-line), 0 1.6em 3em -1em rgb(0 0 0 / 0.45); opacity: 0; transform: translate(-50%, -46%) scale(0.96); transition: opacity var(--m-fast), transform var(--m-base) var(--ease-pop); }
.h-list .h-pop { opacity: 1; transform: translate(-50%, -50%); }
.h-pop > b { font-size: 1.5em; }
.h-r { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 0.6em; padding: 0.5em 0; border-bottom: 1px solid var(--w-grid); font-size: 1.15em; }
.h-r em { font-style: normal; font-variant-numeric: tabular-nums; }
.h-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 0.5em; color: var(--w-mut); font-size: 1.1em; }
@media (max-width: 639px) {
  .h-body { padding: 1.2em 1.4em; }
  .h-safe strong { font-size: 2.6em; }
  .h-card strong { font-size: 1.5em; }
  .h-pop { width: 36em; }
}