/* Life Inbox and detail-sheet page-specific overrides. */


/* Editable memories */
.memory-edit-form{display:grid;gap:12px;margin-top:18px}
.memory-edit-form .field{margin:0}
.edit-events-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}
.edit-events-heading h3{margin:0}
.school-event-editor{display:grid;gap:10px;margin-bottom:12px;padding:13px;border:1px solid var(--line);border-radius:16px;background:#f8f8fa}
.school-event-editor-head{display:flex;align-items:center;justify-content:space-between}
.remove-event-button{border:0;background:transparent;color:var(--danger);font-size:11px;font-weight:750}


/* Simple School Year editing */
.simple-school-events-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 10px;
}

.simple-school-events-heading h3{
  margin:0;
  font-size:17px;
}

.simple-school-events-heading p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.simple-school-events{
  display:grid;
  gap:8px;
}

.simple-school-event{
  display:grid;
  grid-template-columns:auto 72px 1fr;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fafafa;
}

.simple-school-event input{
  width:18px;
  height:18px;
  accent-color:var(--accent);
}

.simple-school-event-date{
  color:var(--muted);
  font-size:11px;
  font-weight:750;
  line-height:1.3;
}

.simple-school-event-copy strong,
.simple-school-event-copy small{
  display:block;
}

.simple-school-event-copy strong{
  font-size:13px;
  line-height:1.3;
}

.simple-school-event-copy small{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

@media(max-width:390px){
  .simple-school-event{
    grid-template-columns:auto 58px 1fr;
  }
}


.memory-top-actions{
  display:flex;
  gap:9px;
  margin:12px 0 18px;
}

.memory-top-actions .btn{
  margin:0;
}


/* Swipe-to-edit/delete Life Inbox rows */
.inbox-list{
  overflow:hidden;
}

.swipe-row{
  --swipe-x:0px;
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  touch-action:pan-y;
}

.swipe-row:last-child{
  border-bottom:0;
}

.swipe-row .inbox-row{
  position:relative;
  z-index:2;
  border-bottom:0;
  background:var(--surface);
  transform:translateX(var(--swipe-x));
  transition:transform .2s ease;
}

.swipe-row.swipe-open .inbox-row{
  transform:translateX(-142px);
}

.swipe-actions{
  position:absolute;
  inset:0 0 0 auto;
  z-index:1;
  display:flex;
  width:142px;
  justify-content:flex-end;
}

.swipe-action{
  width:71px;
  border:0;
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:800;
}

.swipe-edit{
  background:#6d8298;
}

.swipe-delete{
  background:#b8655d;
}

@media(hover:hover) and (pointer:fine){
  .swipe-row:focus-within .swipe-actions{
    aria-hidden:false;
  }
}


/* Keep long memory details escapable on every phone. */
.detail-sheet-close-fixed{
  display:none;
}

@media(max-width:699px){
  .sheet-backdrop{
    padding:
      max(8px,env(safe-area-inset-top))
      8px
      calc(76px + env(safe-area-inset-bottom));
  }

  .detail-sheet{
    position:relative;
    max-height:calc(100dvh - 92px - env(safe-area-inset-bottom));
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-top:60px;
  }

  .detail-sheet-close-fixed{
    position:sticky;
    top:0;
    z-index:20;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    margin:0 0 -42px auto;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--surface);
    color:var(--text);
    box-shadow:0 5px 18px rgba(0,0,0,.18);
    font:700 25px/1 "DM Sans",sans-serif;
    cursor:pointer;
    touch-action:manipulation;
  }

  .detail-sheet .sheet-top{
    padding-right:50px;
  }

  .detail-sheet .sheet-top .sheet-close{
    display:none;
  }
}


/*
  Mobile memory sheet layering
  The app header is sticky at z-index 100. Keep the memory above it, while the
  bottom navigation remains available at z-index 900.
*/
@media(max-width:699px){
  body.detail-open{
    overflow:hidden;
  }

  .sheet-backdrop{
    z-index:850;
    align-items:flex-start;
    padding:
      max(8px,env(safe-area-inset-top))
      8px
      calc(82px + env(safe-area-inset-bottom));
  }

  .detail-sheet{
    position:relative;
    width:min(100%,500px);
    max-height:calc(100dvh - 98px - env(safe-area-inset-bottom));
    margin:0;
  }

  .detail-sheet-close-fixed{
    position:fixed;
    top:max(12px,calc(env(safe-area-inset-top) + 8px));
    right:max(16px,calc((100vw - 520px) / 2 + 16px));
    z-index:875;
    margin:0;
  }
}