/* The wallpaper you make (js/look.mjs): a background that follows light and dark mode, and over it a pattern of dots or
   grid lines drawn once as a small tile, or your own picture. Optional slow drift moves the pattern with a transform only. */
.wp3{position:absolute;inset:0;overflow:hidden;background:var(--wl-bg-l,var(--bg));contain:strict}
.wp3 i{position:absolute;display:block;pointer-events:none}
.wp3 .wp3-p{inset:0;background-image:var(--wl-p-l);background-size:var(--wl-t) var(--wl-t)}
.wp3.drift .wp3-p{inset:calc(var(--wl-t) * -1);will-change:transform;animation:wl-drift 120s linear infinite}
@keyframes wl-drift{to{transform:translate(var(--wl-t),var(--wl-t))}}
.wp3.k-plain .wp3-p,.wp3.k-photo .wp3-p{display:none}
.wp3.k-photo{background:#000 var(--wl-photo) center/cover no-repeat}
.wp3 .wp3-dim{inset:0;background:#000;opacity:0}
:root[data-theme=dark] .wp3{background-color:var(--wl-bg-d,var(--bg))}
:root[data-theme=dark] .wp3 .wp3-p{background-image:var(--wl-p-d)}
:root[data-theme=dark] .wp3.k-photo .wp3-dim{opacity:var(--wl-dim,.3)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .wp3{background-color:var(--wl-bg-d,var(--bg))}
  :root:not([data-theme=light]) .wp3 .wp3-p{background-image:var(--wl-p-d)}
  :root:not([data-theme=light]) .wp3.k-photo .wp3-dim{opacity:var(--wl-dim,.3)}
}
.wp3.k-photo{background-color:#000}
#desk[data-motion="off"] .wp3 *{animation:none!important}
@media (prefers-reduced-motion:reduce){.wp3 *{animation:none!important}}

/* the lock screen's own background */
.lock .lk-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lock{isolation:isolate}
.lock.no-time .lt,.lock.no-date .ld,.lock.no-who .lk-who{display:none!important}
.lock.on-pic{color:#fff}.lock.on-pic :is(.lg,.lt,.ld,.ln){color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}

/* the editors in Settings */
.lx-ed{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:20px;align-items:start}
.lx-pv{position:relative;aspect-ratio:16/10;border-radius:var(--r-5);overflow:hidden;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.lx-pv .wp3{position:absolute;inset:0}
.lx-pvl .lx-pvt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink);text-align:center}
.lx-pvt b{font-size:34px;font-weight:var(--fw-b);letter-spacing:-.03em;line-height:1}.lx-pvt span{font-size:var(--fs-3);font-weight:var(--fw-m)}.lx-pvt small{font-size:var(--fs-1);color:var(--ink2)}
.lx-fs{display:flex;flex-direction:column;gap:12px;min-width:0}
.lx-seg{align-self:flex-start;flex-wrap:wrap}
.lx-r{display:grid;grid-template-columns:150px minmax(0,1fr) 40px;align-items:center;gap:12px;font-size:var(--fs-3);color:var(--ink2)}
.lx-r b{font-weight:var(--fw-b);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.lx-r input{width:100%;accent-color:var(--ink)}
.lx-row{display:flex;flex-wrap:wrap;gap:10px 22px}
.lx-c{display:flex;align-items:center;gap:10px;font-size:var(--fs-3);color:var(--ink2)}
.lx-cw{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:var(--r-pill);background:var(--surface2)}
.lx-cw input[type=color]{width:30px;height:30px;border:0;padding:0;border-radius:50%;background:none;cursor:pointer;overflow:hidden}
.lx-cw input[type=color]::-webkit-color-swatch-wrapper{padding:0}.lx-cw input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.lx-auto{border:0;background:none;border-radius:var(--r-pill);padding:6px 12px;font:inherit;font-size:var(--fs-2);font-weight:var(--fw-m);color:var(--ink2);cursor:pointer}
.lx-auto.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.lx-t{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-3);color:var(--ink);cursor:pointer}.lx-t input{width:18px;height:18px;accent-color:var(--ink)}
.lx-i{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-2);color:var(--ink2)}
.lx-i input{border:0;border-radius:var(--r-3);background:var(--surface2);padding:10px 12px;font:inherit;font-size:var(--fs-4);color:var(--ink);outline:0}
.lx-i input:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (max-width:760px){.lx-ed{grid-template-columns:1fr}.lx-r{grid-template-columns:110px minmax(0,1fr) 36px}}
.grain{display:none!important} /* retired: the wallpaper has its own options now */