/* The look picker: every look full screen, side by side, swiped between; a floating card at
   the bottom with the look's name, dots and "Use this look". Colors from brand.css only. */
.picker{position:fixed; inset:0; background:var(--brand-frame); overflow:hidden}
.pk-track{position:absolute; inset:0; display:flex; overflow:hidden; touch-action:pan-y}
.pk-slide{position:relative; flex:0 0 100%; height:100%; overflow:hidden; background:var(--brand-panel)}
.pk-live{display:block; width:100%; height:100%; border:0; background:var(--brand-paper)}
.pk-wait{position:absolute; inset:0; display:grid; place-items:center}
.pk-wait > *{grid-area:1/1}
.pk-wait .loader{z-index:1; padding:26px 30px; border-radius:24px; background:color-mix(in srgb, var(--brand-paper) 88%, transparent)}
.pk-still{display:block; width:100%; height:100%; object-fit:cover; object-position:top}
.pk-still-tag{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:8px 14px; border-radius:999px; white-space:nowrap;
  background:color-mix(in srgb, var(--brand-frame) 78%, transparent); color:var(--brand-on-dark); font-size:15px}
.pk-top{position:absolute; top:max(12px, env(safe-area-inset-top, 0px)); left:12px; right:12px; z-index:5; display:flex; justify-content:space-between; align-items:center; pointer-events:none}
.pk-top > *{pointer-events:auto}
.hintpill{display:flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:999px; font-size:15px;
  background:color-mix(in srgb, var(--brand-frame) 78%, transparent); color:var(--brand-on-dark); transition:opacity .6s}
.hintpill .icon{width:16px; height:16px}
.hintpill.gone{opacity:0; pointer-events:none}
.pk-arrows{display:none}
.pk-bar{position:absolute; left:10px; right:10px; bottom:max(10px, env(safe-area-inset-bottom, 0px)); z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:14px 14px 14px 18px; border-radius:20px; box-shadow:var(--brand-shadow-dark);
  background:color-mix(in srgb, var(--brand-paper) 95%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.pk-bar .nm{flex:1; min-width:0}
.pk-bar .nm b{display:block; font:400 22px/1.15 var(--brand-font-body)}
.pk-bar .nm span{display:block; font-size:15px; color:var(--brand-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-bar .dbtn{min-height:52px}
.dots{display:flex; gap:6px; margin-top:6px}
.dots i{width:7px; height:7px; border-radius:50%; background:var(--brand-line)}
.dots i.on{background:var(--brand-ink)}
.pk-err{flex-basis:100%; margin:0; color:var(--brand-danger)}
@media (min-width:900px), (hover:hover) and (pointer:fine){
  .pk-arrows{display:flex; position:absolute; top:50%; left:16px; right:16px; z-index:5; justify-content:space-between; transform:translateY(-50%); pointer-events:none}
  .pk-arrows .round{pointer-events:auto; width:56px; height:56px}
  .pk-arrows .round:disabled{opacity:.35; cursor:default}
  .pk-bar{left:50%; right:auto; width:min(620px, calc(100% - 32px)); transform:translateX(-50%); bottom:22px}
}
@media (prefers-reduced-motion:reduce){ .hintpill{transition:none} }