/* Admin sign-in (canvas board "Admin login" v1). The Auth component (.auth, .auth-vis, .auth-main,
   .auth-card …) is in bundle.css; this adds the slider the team asked for on the left and the
   pieces the board draws inline. */

body { background: var(--bg); }

/* slider: pictures stacked, the shown one fades in */
.lg-slides { isolation: isolate; }
.lg-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.lg-slide.is-on { opacity: 1; }
.lg-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.lg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,12,30,0) 40%, rgba(0,12,30,.78)); pointer-events: none; }
.auth-vis .av-tx { z-index: 1; gap: 18px; max-width: 520px; }
.lg-cap { display: flex; flex-direction: column; gap: 10px; }
.lg-cap[hidden] { display: none; }

/* dots + pause */
.lg-ctl { display: flex; align-items: center; gap: 12px; }
.lg-dots { display: flex; gap: 4px; }
.lg-dot { position: relative; width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; }
.lg-dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.45); transition: width .25s, background-color .25s; }
.lg-dot.is-on::before { width: 24px; background: #fff; }
.lg-dot:hover::before { background: rgba(255,255,255,.8); }
.lg-pp { width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.16); }
.lg-pp:hover { background: rgba(255,255,255,.28); }
.lg-pp .ico { width: 14px; height: 14px; }
.lg-pp .ico:last-child, .lg-pp.is-paused .ico:first-child { display: none; }
.lg-pp.is-paused .ico:last-child { display: block; }
.auth-vis :focus-visible { outline-color: #fff; }

/* form */
.lg-logo { height: auto; padding: 0; justify-content: flex-start; }
.lg-logo > b { display: inline; }
.ipw .ib .ico:last-child, .ipw .ib[aria-pressed="true"] .ico:first-child { display: none; }
.ipw .ib[aria-pressed="true"] .ico:last-child { display: block; }
.auth-card .help[hidden] { display: none; }
.field.is-error .help { color: var(--red-text); }
.field.is-error .input:focus, .field.is-error .input:focus-visible { box-shadow: inset 0 0 0 2px var(--red); }
.lg-remember { font-size: 15px; }
.lg-submit { height: 52px; font-size: 17px; }
.lg-classic { font-size: 15px; color: var(--t4); text-decoration: underline; text-underline-offset: 3px; }
.lg-classic:hover { color: var(--t2); }

@media (prefers-reduced-motion: reduce) {
  .lg-slide, .lg-dot::before { transition: none; }
}