/* JLJAM OS 7.16.2 | Show the complete four-artist roster on touch devices;
   increase dock ergonomics without overlaying content. Loaded last on Home. */
@media (max-width:1050px) {
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase.ej-two-up {
    box-sizing:border-box!important;
    padding:12px!important;
    margin-bottom:13px!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-roster-title {
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
    justify-content:space-between!important;gap:10px!important;
    margin-bottom:10px!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-roster-title>strong {
    font:850 clamp(19px,4.6vw,25px)/1.12 system-ui!important;
    min-width:0!important;
  }
  /* Spotlight and carousel arrows are desktop-only: every artist remains on-screen
     on phones/tablets instead of moving sideways or hiding behind a hero card. */
  body.clarity7140.studio7150 #app .jljam-easy .studio-gallery-controls,
  body.clarity7140.studio7150 #app .jljam-easy .aurora-controls,
  body.clarity7140.studio7150 #app .jljam-easy .aurora-navigation {display:none!important}
  body.clarity7140.studio7150 #app .jljam-easy .ej-roster-title .ej-roster-all {
    display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;
    grid-column:auto!important;grid-row:auto!important;
    margin:0!important;min-height:39px!important;
    font:750 clamp(12px,3.1vw,15px)/1.1 system-ui!important;
    padding:7px 10px!important;white-space:nowrap!important;
  }
  /* iPad: all four equal-sized portraits in a single row. */
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-roster-strip,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase.ej-two-up .ej-roster-strip,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase[data-aurora-mode="spotlight"] .ej-roster-strip {
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-flow:row!important;grid-auto-columns:auto!important;
    gap:10px!important;overflow-x:visible!important;overflow-y:visible!important;
    scroll-snap-type:none!important;scroll-padding:0!important;
    padding:0!important;min-width:0!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-roster-strip>.ej-person,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase[data-aurora-mode="spotlight"] .ej-roster-strip>.ej-person,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase[data-aurora-mode="spotlight"] .ej-roster-strip>.ej-person.aurora-featured {
    display:block!important;position:relative!important;box-sizing:border-box!important;
    grid-column:auto!important;grid-row:auto!important;order:0!important;
    align-self:stretch!important;justify-self:stretch!important;
    min-width:0!important;min-height:0!important;width:100%!important;
    aspect-ratio:1 / 1.12!important;height:auto!important;max-height:none!important;
    padding:0!important;overflow:hidden!important;border-radius:17px!important;
    scroll-snap-align:none!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-person-image {
    position:absolute!important;inset:0!important;display:block!important;
    width:100%!important;height:100%!important;aspect-ratio:auto!important;
    border-radius:inherit!important;min-height:0!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-person-image img {
    width:100%!important;height:100%!important;object-fit:cover!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-person-info,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase[data-aurora-mode="spotlight"] .ej-roster-strip>.ej-person:not(.aurora-featured) .ej-person-info {
    position:absolute!important;inset:auto 0 0!important;z-index:3!important;
    width:auto!important;min-height:0!important;display:flex!important;
    align-items:end!important;justify-content:space-between!important;gap:2px!important;
    padding:26px 7px 8px!important;
    background:linear-gradient(0deg,rgba(18,7,33,.96),rgba(26,9,45,.62) 48%,transparent)!important;
    border:0!important;text-shadow:0 1px 4px #130820!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-person-info strong,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase[data-aurora-mode="spotlight"] .ej-roster-strip>.ej-person:not(.aurora-featured) .ej-person-info strong {
    display:block!important;min-width:0!important;
    font:850 clamp(13px,2vw,20px)/1.09 system-ui!important;
    letter-spacing:-.04em!important;overflow-wrap:normal!important;word-break:normal!important;
    white-space:normal!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-portrait-arrow {
    display:none!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-person:focus-visible {
    outline:3px solid #fff1ff!important;outline-offset:2px!important;
  }
}
@media (max-width:600px){
  /* On a phone, 2 × 2 balances portrait visibility with large tap targets. */
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-roster-strip,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase.ej-two-up .ej-roster-strip,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase[data-aurora-mode="spotlight"] .ej-roster-strip {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-roster-strip>.ej-person,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase[data-aurora-mode="spotlight"] .ej-roster-strip>.ej-person,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase[data-aurora-mode="spotlight"] .ej-roster-strip>.ej-person.aurora-featured{
    aspect-ratio:1.03 / 1!important;max-height:none!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase .ej-person-info strong,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase[data-aurora-mode="spotlight"] .ej-roster-strip>.ej-person:not(.aurora-featured) .ej-person-info strong,
  body.clarity7140.studio7150 #app .jljam-easy .ej-portrait-showcase[data-aurora-mode="spotlight"] .ej-roster-strip>.ej-person.aurora-featured .ej-person-info strong{
    font-size:clamp(15px,4.2vw,19px)!important;
  }
}
@media (max-width:760px){
  /* Full-sized, equal navigation. Five destinations, no clipped labels. */
  html.jljam-big-dock body.clarity7140.studio7150 #app .mobile-dock.mobile-dock:has(>button.on),
  html.jljam-big-dock body.clarity7140.studio7150 #app .mobile-dock,
  body.clarity7140.studio7150 #app .mobile-dock,
  body.clarity7140.studio7150[data-display-mode] #app .mobile-dock{
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    position:fixed!important;left:6px!important;right:6px!important;
    bottom:calc(7px + env(safe-area-inset-bottom,0px))!important;
    margin:0!important;width:auto!important;max-width:none!important;
    height:122px!important;min-height:122px!important;max-height:122px!important;
    padding:7px!important;gap:3px!important;align-items:stretch!important;
    border-radius:24px!important;overflow:hidden!important;
    z-index:1350!important;
  }
  html.jljam-big-dock body.clarity7140.studio7150 #app .mobile-dock>button,
  body.clarity7140.studio7150 #app .mobile-dock>button,
  body.clarity7140.studio7150[data-display-mode] #app .mobile-dock>button{
    box-sizing:border-box!important;display:flex!important;flex-flow:column nowrap!important;
    align-items:center!important;justify-content:center!important;
    min-width:0!important;width:100%!important;max-width:100%!important;
    height:106px!important;min-height:106px!important;max-height:106px!important;
    border-radius:17px!important;margin:0!important;
    padding:7px 0!important;gap:8px!important;
    font:850 clamp(13px,4.35vw,18px)/1.12 system-ui!important;
    white-space:nowrap!important;letter-spacing:-.025em!important;
    overflow:hidden!important;touch-action:manipulation!important;
  }
  html.jljam-big-dock body.clarity7140.studio7150 #app .mobile-dock>button>span,
  body.clarity7140.studio7150 #app .mobile-dock>button>span,
  body.clarity7140.studio7150[data-display-mode] #app .mobile-dock>button>span{
    font:500 37px/1 system-ui!important;height:38px!important;
    display:block!important;min-width:0!important;margin:0!important;
  }
  body.clarity7140.studio7150 #app .shell,
  body.clarity7140.studio7150 #app .jljam-easy{
    padding-bottom:calc(205px + env(safe-area-inset-bottom,0px))!important;
  }
  body.clarity7140.studio7150 #app #view>section,
  body.clarity7140.studio7150 #app .ej-step{
    scroll-margin-bottom:calc(190px + env(safe-area-inset-bottom,0px))!important;
  }
  body.clarity7140.studio7150 #app .jljam-easy .ej-intro {margin-bottom:11px!important}
}
@media (min-width:761px) and (max-width:1379px), (min-width:761px) and (pointer:coarse){
  body.clarity7140.studio7150 #app .mobile-dock{
    min-height:110px!important;height:110px!important;max-height:110px!important;
    padding:8px!important;gap:8px!important;
  }
  body.clarity7140.studio7150 #app .mobile-dock button{
    min-height:92px!important;height:92px!important;max-height:92px!important;
    font:850 clamp(16px,2.1vw,20px)/1.15 system-ui!important;
  }
  body.clarity7140.studio7150 #app .mobile-dock button span{
    font:500 36px/1 system-ui!important;
  }
  body.clarity7140.studio7150 #app .shell,
  body.clarity7140.studio7150 #app .jljam-easy{
    padding-bottom:calc(180px + env(safe-area-inset-bottom,0px))!important;
  }
}
/* Follow existing keyboard behaviour; don't obscure text entry. */
body.clarity7140.studio7150.wf-keyboard-open #app .mobile-dock{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transform:translateY(130%)!important;
}
@media(prefers-reduced-motion:reduce){
  body.clarity7140.studio7150 #app .mobile-dock button,
  body.clarity7140.studio7150 #app .ej-person{transition:none!important}
}