/* Simplified one-screen guest camera experience.
   Keep the wedding atmosphere; keep the mechanics obvious. */

body[data-current-view="shoot-view"]{
  overflow-x:hidden;
}

body[data-current-view="shoot-view"] .masthead{
  display:none !important;
}

body[data-current-view="shoot-view"] .app-shell{
  max-width:none;
  padding:
    calc(env(safe-area-inset-top) + 42px)
    6px
    calc(env(safe-area-inset-bottom) + 8px);
}

#shoot-view:not([hidden]){
  width:100%;
  min-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 50px);
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Minimal wedding identity: monogram in place of repeated names. */
#shoot-view .camera-topline{
  position:relative;
  min-height:52px;
  margin:0 2px 2px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  border-bottom:1px solid rgba(225,201,142,.25);
}

#shoot-view .camera-topline::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:112px;
  height:48px;
  transform:translate(-50%,-50%);
  background:url('/icons/am-monogram.svg') center/contain no-repeat;
  opacity:.94;
  filter:drop-shadow(0 1px 7px rgba(218,172,75,.18));
  pointer-events:none;
}

#shoot-view .camera-topline>div{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

#shoot-view #change-person{
  min-height:36px;
  padding:6px 4px;
  font:700 10px/1 Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.72;
}

/* The simulated camera is the experience, not a dashboard. */
#shoot-view .camera-body{
  width:calc(100vw - 4px)!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw + 2px)!important;
  margin-right:calc(50% - 50vw + 2px)!important;
  padding-left:4px!important;
  padding-right:4px!important;
  padding-bottom:10px!important;
}

#shoot-view .camera-top-plate{
  margin-left:-4px!important;
  margin-right:-4px!important;
}

#shoot-view .camera-brand{
  min-height:18px!important;
  margin:1px 0 4px!important;
  font-size:clamp(11px,3vw,14px)!important;
}

#shoot-view .camera-front{
  width:100%!important;
  padding-left:0!important;
  padding-right:0!important;
}

#shoot-view .viewfinder{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:3px!important;
}

#shoot-view .viewfinder-inner{
  width:100%!important;
  aspect-ratio:4/3!important;
  min-height:0!important;
}

#shoot-view .live-viewfinder{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

#shoot-view .shutter{
  width:clamp(58px,15vw,70px)!important;
  height:clamp(58px,15vw,70px)!important;
  margin:8px auto 0!important;
}

/* Storage still works exactly the same; presentation becomes quiet. */
#shoot-view .status-strip{
  margin:2px auto 0!important;
  width:min(94vw,520px);
  min-height:28px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0!important;
  border-top:1px solid rgba(225,201,142,.18);
  border-bottom:1px solid rgba(225,201,142,.18);
}

#shoot-view .status-strip>div{
  min-height:28px!important;
  padding:3px 7px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
}

#shoot-view .status-strip>div+div{
  border-left:1px solid rgba(225,201,142,.14)!important;
}

#shoot-view .status-strip strong{
  font-size:13px!important;
  line-height:1!important;
}

#shoot-view .status-strip span{
  font:700 9px/1 Arial,sans-serif!important;
  letter-spacing:.07em;
  text-transform:uppercase;
  opacity:.66;
}

/* Capture review is the visual confirmation; don't duplicate it with another card. */
#shoot-view .latest-photo{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

#shoot-view .actions{
  margin:2px auto 0!important;
  width:min(94vw,520px);
}

#shoot-view .actions .secondary{
  width:100%;
  min-height:42px!important;
  padding:8px 16px!important;
  border-radius:999px;
  font:800 12px/1 Arial,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* Gallery and Darkroom remain easy to reach from My Roll instead of crowding the shutter. */
#shoot-view .guest-links{
  display:none!important;
}

/* The +1 tool is secondary; only take space if invitation logic actually reveals it. */
#shoot-view .plus-one-card[hidden]{
  display:none!important;
}

/* More compact Display control; full wording remains in the accessible name. */
.display-toggle{
  width:38px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
}

.display-toggle .display-aa{
  margin:0!important;
  font-size:16px!important;
}

.display-toggle>span:last-child{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Illuminated keeps the same simple geometry, but makes the core controls clearer. */
html[data-view-mode="illuminated"] #shoot-view .camera-topline{
  border-bottom-color:rgba(93,67,30,.28);
}

html[data-view-mode="illuminated"] #shoot-view .camera-topline::before{
  opacity:1;
  filter:drop-shadow(0 1px 5px rgba(119,78,21,.18));
}

html[data-view-mode="illuminated"] #shoot-view .status-strip{
  border-color:#9b8158;
}

html[data-view-mode="illuminated"] #shoot-view .status-strip>div+div{
  border-left-color:#c3ad87!important;
}

html[data-view-mode="illuminated"] #shoot-view .status-strip strong{
  color:#17130f!important;
  font-size:16px!important;
}

html[data-view-mode="illuminated"] #shoot-view .status-strip span{
  color:#40382f!important;
  font-size:10px!important;
  opacity:1;
}

html[data-view-mode="illuminated"] #shoot-view .actions .secondary{
  min-height:48px!important;
  font-size:15px!important;
}

/* Short phones: protect the viewfinder and shutter first, compress ornament second. */
@media (max-height:760px) and (max-width:760px){
  body[data-current-view="shoot-view"] .app-shell{
    padding-top:calc(env(safe-area-inset-top) + 38px);
    padding-bottom:4px;
  }
  #shoot-view:not([hidden]){gap:3px}
  #shoot-view .camera-topline{min-height:42px;margin-bottom:0}
  #shoot-view .camera-topline::before{width:92px;height:38px}
  #shoot-view .camera-top-plate{height:30px!important;margin-bottom:3px!important}
  #shoot-view .camera-brand{min-height:15px!important;margin-bottom:2px!important}
  #shoot-view .viewfinder{padding:2px!important}
  #shoot-view .shutter{width:54px!important;height:54px!important;margin-top:5px!important}
  #shoot-view .status-strip{min-height:24px;margin-top:0!important}
  #shoot-view .status-strip>div{min-height:24px!important;padding:2px 5px!important}
  #shoot-view .actions{margin-top:0!important}
  #shoot-view .actions .secondary{min-height:38px!important;padding:6px 14px!important}
}

@media (max-width:390px){
  #shoot-view .camera-topline::before{width:96px;height:40px}
  #shoot-view #change-person{font-size:9px}
  #shoot-view .camera-body{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
}