/* Release-candidate low-risk fixes: protected-route bootstrap, modal stacking and managed-profile form geometry. */

/* Protected Family routes are rewritten to the SEO root shell. Hide that static
   public root before first paint; the branded Family loader sits above it until
   the authenticated app is genuinely ready. */
html[data-family-protected-bootstrap="true"] #root{
  visibility:hidden!important;
}

/* ViewportModal owns the app modal layer. What's New must never fall behind the
   sticky authenticated shell because of its older local z-index. */
.sproglet-viewport-modal-backdrop.whats-new-backdrop{
  z-index:10000!important;
}

/* Brand the modal scrollbar and keep its track/thumb away from the rounded shell
   corners so native scrollbar chrome does not bleed through the radius. */
.sproglet-viewport-modal-dialog.whats-new-shell{
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--family-theme-action-accent,var(--family-theme-action-primary,var(--accent))) 72%,var(--muted)) transparent;
}
.sproglet-viewport-modal-dialog.whats-new-shell::-webkit-scrollbar{
  width:10px;
}
.sproglet-viewport-modal-dialog.whats-new-shell::-webkit-scrollbar-track{
  margin-block:24px;
  background:transparent;
}
.sproglet-viewport-modal-dialog.whats-new-shell::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}
.sproglet-viewport-modal-dialog.whats-new-shell::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:color-mix(in srgb,var(--family-theme-action-accent,var(--family-theme-action-primary,var(--accent))) 72%,var(--muted));
  background-clip:content-box;
}
.sproglet-viewport-modal-dialog.whats-new-shell::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--family-theme-action-accent,var(--family-theme-action-primary,var(--accent))) 86%,var(--ink));
  background-clip:content-box;
}

/* Keep managed-profile fields on a stable two-column rhythm on roomy layouts. */
@media (min-width:901px){
  .app .admin-workspace .member-profile-field-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
  }

  .app .admin-workspace .member-profile-child-date{
    width:calc((100% - 8px)/2)!important;
    max-width:none!important;
  }

  .app .admin-workspace .member-profile-birthday-row,
  .app .admin-workspace .member-profile-birthday-exact,
  .app .admin-workspace .member-profile-birthday-approximate,
  .app .admin-workspace .member-profile-birthday-unknown{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
  }

  .app .admin-workspace .member-profile-birthday-rough-fields{
    display:grid!important;
    grid-template-columns:minmax(0,1.3fr) minmax(110px,.7fr)!important;
    gap:8px!important;
    width:100%!important;
  }

  /* Unknown birthday has no right-column field label. Offset it by the left
     label+gap so its copy is centred against the segmented control itself, and
     centre the copy within the same right-hand column used by Pet type. */
  .app .admin-workspace .member-profile-birthday-unknown .member-profile-birthday-detail{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box;
    min-height:66px;
    padding-top:22px;
  }

  .app .admin-workspace .member-profile-birthday-unknown .member-profile-birthday-note{
    width:100%;
    min-height:44px;
    margin:0!important;
    padding:0 12px!important;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
}

.app .admin-workspace .member-profile-field-grid .field-group>label{
  white-space:nowrap;
}

/* The segmented birthday control is 44px high with a 1px border and 4px
   internal padding. Keep the three selectable pills at 34px so they are truly
   centred instead of overflowing the control by a couple of pixels. */
.app .admin-workspace .member-profile-form .auth-managed-segments{
  align-items:center!important;
}
.app .admin-workspace .member-profile-form .auth-managed-segments label{
  box-sizing:border-box!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 8px!important;
  display:grid!important;
  place-items:center!important;
  text-align:center;
}
.app .admin-workspace .member-profile-form .auth-managed-segments label>span{
  display:flex!important;
  width:100%;
  height:100%;
  align-items:center!important;
  justify-content:center!important;
  text-align:center;
  line-height:1!important;
}

.app .admin-workspace .member-profile-birthday-detail{
  min-width:0;
  width:100%;
}

/* Keep photo controls genuinely centred under the 112px profile square. */
.app .admin-workspace .member-profile-photo-block,
.app .admin-workspace .member-profile-photo-actions{
  justify-items:center;
}
.app .admin-workspace .member-profile-photo-actions .btn,
.app .admin-workspace .member-profile-file-button{
  margin-inline:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Permission-group toggles inherit the app's generic label margin unless reset,
   which makes the switch look vertically off-centre. Give every row a stable
   height and centre the switch/text without changing the light/dark theme toggle. */
.app .admin-workspace .permission-toggle{
  min-height:44px;
  margin:0!important;
  align-items:center!important;
}
.app .admin-workspace .permission-switch{
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
}
.app .admin-workspace .permission-toggle b{
  margin:0!important;
  line-height:1.2;
}

/* Week/day use a visually-hidden native date control. Restore the native picker
   hit target while keeping the branded period label visible above it. */
@media (min-width:1181px){
  .app:has(> .calendar-workspace) .calendar-period-field:has(.calendar-date-filter){
    cursor:pointer;
  }
  .app:has(> .calendar-workspace) .calendar-period-field .calendar-date-filter{
    appearance:auto!important;
    -webkit-appearance:auto!important;
    opacity:0!important;
    pointer-events:auto!important;
    cursor:pointer!important;
  }
  .app:has(> .calendar-workspace) .calendar-period-field .calendar-date-filter::-webkit-calendar-picker-indicator{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    opacity:1!important;
    cursor:pointer!important;
  }

  /* Day contains both a weekday heading and the day body. Keep the heading in
     its own auto row so the actual selected day is no longer clipped. */
  .app:has(> .calendar-workspace) .calendar.calendar-day{
    grid-template-rows:auto minmax(0,1fr)!important;
  }
}

/* Smooth the visual hand-off between Month / Week / Day without altering the
   approved control geometry. Each view has a distinct animation name so a view
   change reliably restarts the transition. */
@media (prefers-reduced-motion:no-preference){
  .calendar-workspace .calendar.calendar-month{animation:sproglet-calendar-month-in .34s cubic-bezier(.22,.8,.3,1)}
  .calendar-workspace .calendar.calendar-week{animation:sproglet-calendar-week-in .34s cubic-bezier(.22,.8,.3,1)}
  .calendar-workspace .calendar.calendar-day{animation:sproglet-calendar-day-in .34s cubic-bezier(.22,.8,.3,1)}
}
@keyframes sproglet-calendar-month-in{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sproglet-calendar-week-in{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sproglet-calendar-day-in{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}

/* The lower Memories Add Memory control now behaves like the primary Timeline
   Add Memory action; the old dropdown chevron is no longer part of the UI. */
.activity-add-menu>.btn.primary>span{
  display:none!important;
}

@media (max-width:900px){
  .app .admin-workspace .member-profile-field-grid,
  .app .admin-workspace .member-profile-birthday-row,
  .app .admin-workspace .member-profile-birthday-exact,
  .app .admin-workspace .member-profile-birthday-approximate,
  .app .admin-workspace .member-profile-birthday-unknown{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }

  .app .admin-workspace .member-profile-child-date{
    width:100%!important;
    max-width:100%!important;
  }

  .app .admin-workspace .member-profile-birthday-rough-fields{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(100px,.7fr)!important;
    gap:8px!important;
  }

  .app .admin-workspace .member-profile-birthday-unknown .member-profile-birthday-detail{
    min-height:0;
    padding-top:0;
  }

  .app .admin-workspace .member-profile-birthday-unknown .member-profile-birthday-note{
    min-height:0;
    padding:0!important;
    justify-content:flex-start;
    text-align:left;
  }
}

@media (max-width:560px){
  .app .admin-workspace .member-profile-form-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }

  .app .admin-workspace .member-profile-photo-block{
    width:112px!important;
  }

  .app .admin-workspace .member-profile-birthday-rough-fields{
    grid-template-columns:minmax(0,1fr)!important;
  }
}