/* The Memory Vault's own look — photos, written memories and awards.
   Lifted out of my.html so /my and /vault wear exactly the same clothes. */

.sec-head { display:flex; flex-direction:column; align-items:center; gap:10px; margin:24px 0 12px; text-align:center; }
.sec-title { font-family:var(--serif); font-size:1.3rem; color:var(--champagne); }
.sec-title span { font-size:.95rem; color:var(--gold); }
.sec-div { height:1px; border:none; margin:22px 0 0; background:linear-gradient(to right, transparent, rgba(176,132,71,.4), transparent); }

.mem .vis {
  position:absolute; bottom:6px; left:6px; z-index:2;
  background:rgba(4,6,15,.8); border:1px solid rgba(176,132,71,.45); color:var(--muted);
  border-radius:999px; padding:3px 10px; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}
.mem .vis.pub { color:#9fd8a8; border-color:rgba(159,216,168,.5); }
.mem .vis:hover { border-color:var(--gold); color:var(--champagne); }

/* written memories show an excerpt; the whole memory unfolds on a tap */
.mem .mem-text {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; cursor: pointer;
}
.mem.open .mem-text { -webkit-line-clamp: unset; }

/* awards stand upright and proud: no italics, just gold */
.award-card { text-align: center; padding: 18px 14px 14px; border-color: rgba(214,178,133,.5); }
.award-card .award-cup { font-size: 2.1rem; filter: drop-shadow(0 0 12px rgba(233,216,166,.55)); }
.award-card .award-title {
  margin-top: 8px; font-family: var(--serif); font-style: normal;
  color: var(--champagne); font-size: 1.02rem; line-height: 1.4;
}
.award-card .award-note {
  margin-top: 4px; font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

.m-actions { display: flex; gap: 12px; margin-top: 18px; }

/* ---------- the vault as a popup, opened by the portal in the 3D world ----------
   A peek, not the vault. Mounting the whole page in here nested a bordered
   card inside a bordered popup inside a bordered panel; nothing about that
   said "a glimpse of what is kept". */
.vault-sheet { max-width: 560px; max-height: 82vh; overflow-y: auto; text-align: center; }
.vault-sheet-t { color: var(--champagne); font-size: 1.7rem; margin-bottom: 4px; }

.peek { margin-top: 26px; text-align: left; }
.peek:first-child { margin-top: 12px; }
.peek-head {
  position: relative;
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
  padding-bottom: 10px;
}
.peek-head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right,
    rgba(176,132,71,.34), rgba(176,132,71,.34) 72%, transparent);
}
.peek-name { flex: 1; font-family: var(--serif); font-size: 1.12rem; color: var(--ivory); }
.peek-years {
  font-family: var(--sans); font-size: .56rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
/* A peek is a glance, not an archive: the tiles sit apart from one another
   with real gaps and softer corners, so the eye can rest on each rather than
   reading one dense wall. The full vault keeps its tight album grid. */
.peek-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.peek-tile {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: 12px; background: rgba(176,132,71,.1);
  border: 1px solid rgba(176,132,71,.18);
}
.peek-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.peek-more {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-family: var(--serif); font-size: 1.05rem;
  color: var(--champagne); background: rgba(176,132,71,.2);
  transition: background .2s;
}
.peek-more:hover { background: rgba(176,132,71,.34); }
.peek-none {
  font-family: var(--serif); font-style: italic; color: var(--muted);
  padding: 10px 0; margin: 0;
}
@media (min-width: 561px) { .peek-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

/* ---------- the vault's own look ----------
   Not a portrait page: a small picture on the left with the name and facts
   beside it, like a plate on a drawer, so the vault is never mistaken for the
   profile page or a memorial. */
.vault-card { margin-bottom: 22px; padding: 18px 18px 20px; }
.vault-plate {
  position: relative;
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding-bottom: 15px; margin-bottom: 4px;
}
.vault-plate::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right,
    rgba(176,132,71,.34), rgba(176,132,71,.34) 70%, transparent);
}
.vault-pic {
  width: 58px; height: 58px; border-radius: 12px; object-fit: cover; flex: none;
  border: 1px solid rgba(176,132,71,.4);
}
.vault-pic-none {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; background: rgba(176,132,71,.14);
}
.vault-who { min-width: 0; }
.vault-name {
  font-family: var(--serif); font-size: 1.22rem; color: var(--ivory);
  margin: 0; line-height: 1.2;
}
.vault-facts {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-top: 5px;
}
/* the key already sits in the badge above; the heading says it in words */
#vaultTitle { letter-spacing: .02em; }

/* the same quiet outline link the days popup uses */
.vault-more {
  display: block; width: 100%; margin-top: 16px;
  background: none; border: 1px solid var(--gold); color: var(--champagne);
}
.vault-more:hover { background: rgba(176,132,71,.14); }

/* The memory modal's actions: on a phone the gold button was being crushed to
   a sliver by Cancel's natural width, showing only "K.". Stacked full width,
   the thing you came to do sits on top and can never be squeezed. */
#memModal .m-actions { flex-wrap: wrap; }
#memModal .m-actions .btn { flex: 1 1 auto; min-width: 150px; }
@media (max-width: 640px) {
  #memModal .m-actions { flex-direction: column; gap: 10px; }
  #memModal .m-actions .btn { width: 100%; flex: none; min-width: 0; }
}
/* the same guard for the customizer, which shares this shape */
@media (max-width: 640px) {
  #custModal .m-actions { flex-direction: column; gap: 10px; }
  #custModal .m-actions .btn { width: 100%; flex: none; min-width: 0; }
}

/* ---------- adding, and the wall of photos ----------
   The gold button used to sit right on top of the first row of pictures, so
   it read as a label for them. It gets its own air. */
.sec-head .vault-add { margin-top: 4px; margin-bottom: 10px; }
.sec-head + .memgrid, .sec-head + .hint { margin-top: 8px; }

/* A handful of memories look best as cards. Once there are enough to feel
   like an album, they close ranks into a phone gallery: square tiles, hairline
   gaps, nothing between the pictures. */
/* A fixed count, not auto-fill: auto-fill on a wide screen turned an album
   into one long strip of postage stamps. Tight and many-columned, the way a
   phone shows a year of photographs. */
.memgrid.gallery {
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
@media (max-width: 900px) { .memgrid.gallery { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 560px) { .memgrid.gallery { grid-template-columns: repeat(4, 1fr); } }
.memgrid.gallery .mem { border: none; border-radius: 0; }
.memgrid.gallery img { height: auto; aspect-ratio: 1; }
/* captions and badges step back until the tile is touched */
.memgrid.gallery .mem .cap { display: none; }
.memgrid.gallery .mem .vis, .memgrid.gallery .mem .del {
  opacity: 0; transition: opacity .2s;
}
/* on a 100px tile the words "PRIVATE" and "PUBLIC" cover the picture they
   describe, so the badge shrinks to the glyph it already carries */
.memgrid.gallery .mem .vis {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 0;
  display: flex; align-items: center; justify-content: center;
}
.memgrid.gallery .mem .vis::before { content: '🔒'; font-size: 9px; }
.memgrid.gallery .mem .vis.pub::before { content: '◍'; font-size: 11px; }
/* a written memory or an award keeps its words, so it keeps its full badge
   and enough room beneath them */
.memgrid.gallery .mem.panel .vis {
  width: auto; height: auto; border-radius: 999px; font-size: .6rem;
  padding: 3px 10px;
}
.memgrid.gallery .mem.panel .vis::before { content: none; }
.memgrid.gallery .mem.panel { padding-bottom: 38px; }
.memgrid.gallery .mem:hover .vis, .memgrid.gallery .mem:hover .del,
.memgrid.gallery .mem:focus-within .vis, .memgrid.gallery .mem:focus-within .del {
  opacity: 1;
}
/* a written memory or an award still needs its words, so it keeps its card
   shape and simply spans the width of two tiles */
.memgrid.gallery .mem.panel { grid-column: span 2; border-radius: 6px; }
@media (max-width: 560px) {
  /* no hover on a phone: the badges stay readable */
  .memgrid.gallery .mem .vis, .memgrid.gallery .mem .del { opacity: 1; }
  .memgrid.gallery .mem .vis { padding: 2px 6px; font-size: .5rem; }
}

/* ---------- who can see this ----------
   Two answers, so two buttons: a dropdown hid the choice behind a tap. */
.vis-pick { display: flex; gap: 8px; margin-bottom: 4px; }
.vis-opt {
  flex: 1; cursor: pointer; padding: 7px 14px; border-radius: 999px;
  font-family: var(--serif); font-size: .88rem; line-height: 1.3; color: var(--muted);
  border: 1px solid rgba(176,132,71,.22); background: rgba(8,12,26,.5);
  transition: border-color .2s, background .2s, color .2s;
}
.vis-opt:hover { border-color: rgba(214,178,133,.6); color: var(--ivory); }
.vis-opt.on {
  border-color: var(--gold); background: rgba(176,132,71,.2);
  color: var(--champagne); box-shadow: 0 0 12px rgba(214,178,133,.25);
}

/* the pencil beside the visibility badge: same size, same quiet */
.mem .edt {
  position: absolute; bottom: 6px; right: 6px; z-index: 2; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,15,.8); border: 1px solid rgba(176,132,71,.45);
  color: var(--muted); font-size: .74rem; line-height: 1;
  transition: color .2s, border-color .2s, background .2s;
}
.mem .edt:hover { color: var(--champagne); border-color: var(--gold); background: rgba(176,132,71,.2); }
.memgrid.gallery .mem .edt { opacity: 0; transition: opacity .2s; bottom: 4px; right: 4px; }
.memgrid.gallery .mem:hover .edt, .memgrid.gallery .mem:focus-within .edt { opacity: 1; }
@media (max-width: 560px) { .memgrid.gallery .mem .edt { opacity: 1; } }
.memgrid.gallery .mem.panel .edt { opacity: 1; }

/* the memory editor keeps the picture in view, so the words have a subject */
.mem-edit-pic {
  display: block; width: 100%; max-height: 220px; object-fit: cover;
  border-radius: 12px; margin-bottom: 6px;
  border: 1px solid rgba(176,132,71,.3);
}

/* The memory editor shares the crush that the memory and star popups had:
   Cancel's natural width squeezed the gold button down to a sliver. Stacked
   full width, the thing you came to do can never be shaved away. */
#memEdit .m-actions { flex-wrap: wrap; }
#memEdit .m-actions .btn { flex: 1 1 auto; min-width: 150px; }
@media (max-width: 640px) {
  #memEdit .m-actions { flex-direction: column; gap: 10px; }
  #memEdit .m-actions .btn { width: 100%; flex: none; min-width: 0; }
}

/* the ✕ was a little square tab beside a round pencil; they match now */
.mem .del {
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,6,15,.8); border: 1px solid rgba(176,132,71,.45);
  font-size: .68rem; line-height: 1;
}
.mem .del:hover { border-color: #e08b8b; background: rgba(224,139,139,.18); }

/* ---------- adding a memory, the way a photo app does it ----------
   Pick what you are adding, drop the picture into a big friendly well, watch
   it appear, then write underneath. The old shape was a dropdown, a bare file
   input and three labels all at the same weight. */
.mem-composer { max-width: 480px; }
.mem-c-t { color: var(--champagne); font-size: 1.6rem; text-align: center; margin-bottom: 22px; }

.mem-kinds { display: flex; gap: 8px; margin-bottom: 20px; }
.mem-kind {
  flex: 1; cursor: pointer; padding: 10px 6px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 1px solid rgba(176,132,71,.22); background: rgba(8,12,26,.5);
  color: var(--muted); font-family: var(--serif); font-size: .82rem; line-height: 1.2;
  transition: border-color .2s, background .2s, color .2s;
}
.mem-kind span { font-size: 1.15rem; }
.mem-kind:hover { border-color: rgba(214,178,133,.6); color: var(--ivory); }
.mem-kind.on {
  border-color: var(--gold); background: rgba(176,132,71,.18);
  color: var(--champagne); box-shadow: 0 0 12px rgba(214,178,133,.22);
}

/* the well */
.mem-drop {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 210px; margin-bottom: 14px; padding: 20px; overflow: hidden;
  border: 1.5px dashed rgba(176,132,71,.38); border-radius: 16px;
  background: rgba(8,12,26,.42); cursor: pointer; text-align: center;
  transition: border-color .2s, background .2s;
}
.mem-drop:hover { border-color: rgba(214,178,133,.75); background: rgba(176,132,71,.08); }
.mem-drop.over {
  border-color: var(--gold); background: rgba(176,132,71,.16);
  box-shadow: inset 0 0 30px rgba(214,178,133,.2);
}
.mem-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mem-drop-mark { font-size: 2.4rem; filter: drop-shadow(0 0 16px rgba(214,178,133,.4)); }
.mem-drop-t { font-family: var(--serif); font-size: 1.12rem; color: var(--champagne); }
.mem-drop-s {
  font-family: var(--sans); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
/* once a picture is chosen it fills the well, and the words step aside */
.mem-preview { display: none; width: 100%; border-radius: 11px; max-height: 320px; object-fit: cover; }
.mem-drop.has { border-style: solid; padding: 8px; min-height: 0; }
.mem-drop.has .mem-preview { display: block; }
.mem-drop.has .mem-drop-inner { display: none; }
.mem-change {
  display: none; position: absolute; right: 16px; bottom: 16px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(4,6,15,.82); border: 1px solid rgba(176,132,71,.5);
  color: var(--champagne);
  font-family: var(--sans); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase;
}
.mem-drop.has .mem-change { display: block; }

/* the words underneath, like a post caption */
.mem-c-body { min-height: 130px; margin: 0 0 16px; }
.mem-c-cap { margin: 0 0 20px; }
.mem-c-vis { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.mem-c-vis-l {
  font-family: var(--sans); font-size: .56rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); flex: none;
}
.mem-c-vis .vis-pick { flex: 1; min-width: 190px; margin-bottom: 0; }
@media (max-width: 430px) {
  .mem-drop { min-height: 170px; }
  .mem-kind { font-size: .74rem; }
}

/* The invitation to open the vault. Run the full width of a desktop card it
   became one very long line; a paragraph wants a readable measure, and the
   button below it wants room to stand apart. */
.vault-pitch { text-align: center; padding: 18px 10px 26px; }
.vault-pitch-t {
  max-width: 46ch; margin: 0 auto 26px;
  font-family: var(--serif); font-style: italic; color: var(--muted);
  font-size: 1.02rem; line-height: 1.75;
}
.vault-pitch .btn { margin: 0; }


/* ---------- arranging the album ----------
   A tile lifts when it is pressed and held, the way a photo does in a phone's
   own gallery: it rises, tilts a little, and the ones it passes step aside. */
.memgrid .mem { cursor: grab; }
.memgrid.arranging { cursor: grabbing; }
.memgrid.arranging .mem { transition: transform .18s ease; }
.memgrid .mem.dragging {
  cursor: grabbing; z-index: 5;
  transform: scale(1.06) rotate(1.4deg);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  border-color: var(--gold) !important;
  opacity: .92;
}
/* while a tile is in the air, nothing underneath tries to catch the pointer */
.memgrid.arranging .mem .vis,
.memgrid.arranging .mem .del,
.memgrid.arranging .mem .edt { pointer-events: none; }


/* the peek is a glance at the album, and the one thing anybody wants to do
   from a glance is add to it */
/* the same block as "Open the full Memory Vault" below it: two full-width
   buttons of different heights read as two different kinds of thing */
.peek-add {
  display: block; width: 100%; margin-top: 12px;
  font-size: .8rem; padding: 14px 34px; border-radius: 999px;
}


/* ---------- an empty vault ----------
   Three placeholders in the shape the memories will take, so the album reads
   as an album from the first day rather than as a page that failed to load.
   They are pictures of nothing in particular and they know it: quiet, dimmed,
   and not offering to be clicked. */
/* four of them: two to a row on a phone, all four across on a wider screen,
   matching the shape the memories themselves take on this page */
/* `.memgrid.vault-empty`, not `.vault-empty`: the vault page sets its own
   column count on `.memgrid` in a later stylesheet, and with equal weight the
   later rule wins. Four photographs were being laid out in five columns. */
.memgrid.vault-empty { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
@media (min-width: 640px) { .memgrid.vault-empty { grid-template-columns: repeat(4, 1fr) !important; } }
.memgrid.vault-empty .mem.ph {
  aspect-ratio: 1; overflow: hidden; border-radius: 14px;
  border: 1px solid rgba(176,132,71,.16);
  opacity: .8; pointer-events: none; cursor: default;
}
.memgrid.vault-empty .mem.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vault-empty-t { text-align: center; padding: 14px 6px 4px; }
@media (max-width: 460px) {
  .memgrid.vault-empty { gap: 8px !important; }
  .memgrid.vault-empty .mem.ph { border-radius: 12px; }
}


/* the peek's own empty wall: the same placeholders, at the peek's own size */
.peek-grid.vault-empty { grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 561px) {
  .peek-grid.vault-empty { grid-template-columns: repeat(4, 1fr) !important; }
}
.peek-grid.vault-empty .mem.ph {
  aspect-ratio: 1; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(176,132,71,.18); opacity: .8;
  pointer-events: none;
}
.peek-grid.vault-empty .mem.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }