/* ---------- My Dexo -- Stage 3B production additions ---------- */
/*
   Everything in this file is new as of Stage 3B. It builds entirely on
   top of dexo.css's existing tokens/buttons/fields/typography (approved
   Stage 3A design system, untouched) -- nothing here redefines a color,
   font, spacing scale, or component dexo.css already owns. Ported
   verbatim from the approved Stage 3B Visual Review V1 package
   (screens 1, 2, 3-final, 4, 6, 7a, 8) -- no reinterpretation.

   Deliberately NOT included, per the approved decisions: the depth/
   display-case treatment (review screen 9) and the bottom-sheet owner
   interaction (review screen 7b, Concept B). Concept A (direct-to-
   exhibit) needs no owner-affordance CSS at all in the grid itself --
   see myedexo.js.
*/

/* ---------- Header: minimal, restrained -- the collection dominates
   the screen, not the chrome around it ---------- */
.myd-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:26px;
}
.myd-header .brand-block .eyebrow{ text-align:left; margin:0 0 3px; }
.myd-header .brand-block h1{
  font-size:19px;
  font-weight:500;
  color:var(--paper);
  margin:0;
  letter-spacing:-0.01em;
}
.account-circle{
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid var(--hairline-strong);
  background:var(--glass-2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; color:var(--muted);
  cursor:pointer;
  flex:0 0 auto;
  margin-top:2px;
}

/* ---------- Collection grid (2+ Dexos) ---------- */
.collection-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px 14px;
  padding-bottom:32px;
}
.dexo-tile{
  position:relative;
  display:block;
  text-align:left;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:inherit;
  font:inherit;
  width:100%;
  text-decoration:none;
}
.dexo-tile .tile-art{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:5/7;
  margin-bottom:10px;
  background:var(--panel);
  box-shadow:0 16px 34px rgba(0,0,0,0.4);
  transition:transform 0.18s var(--ease);
}
.dexo-tile:active .tile-art{ transform:scale(0.972); }
.dexo-tile .tile-glow{
  position:absolute;
  inset:-32%;
  z-index:0;
  filter:blur(28px);
  opacity:0.55;
  pointer-events:none;
}
.dexo-tile .tile-art img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
}
.dexo-tile .tile-caption{ padding:0 1px; }
.dexo-tile .t-name{ font-size:13px; font-weight:500; color:var(--paper); }
.dexo-tile .t-meta{ font-size:11.5px; color:var(--muted-2); margin-top:1px; }

/* Unconfigured tile -- reuses the frosted dexo-object language from
   Stage 3A Screen 1/2 at tile scale, instead of card art. Calm, not an
   error/warning state. */
.dexo-tile.unconfigured .tile-art{
  background:linear-gradient(155deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012) 55%);
  border:1px solid var(--hairline-strong);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.dexo-tile.unconfigured .tile-art .nfc-glyph{ width:26px; height:26px; opacity:0.5; }
.dexo-tile.unconfigured .t-name{ color:var(--muted); }
.dexo-tile.unconfigured .t-meta{ color:var(--muted-2); }

@media (min-width:520px){
  .collection-grid{ grid-template-columns:repeat(3, 1fr); gap:26px 18px; }
}
@media (min-width:860px){
  .collection-grid{ grid-template-columns:repeat(4, 1fr); }
}

/* ---------- Single-Dexo state (FINAL approved treatment) -- shown
   larger and centered beneath the header instead of alone in a
   two-column grid. Target ~180px at a 390px mobile viewport. ---------- */
.collection-solo{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:28px;
  padding-bottom:32px;
}
.collection-solo .dexo-tile{
  width:180px;
  max-width:46vw;
}
.collection-solo .dexo-tile .tile-art{
  margin-bottom:14px;
  box-shadow:0 22px 46px rgba(0,0,0,0.48);
}
.collection-solo .dexo-tile .tile-caption{
  text-align:center;
}
.collection-solo .dexo-tile .t-name{ font-size:14px; }

/* ---------- Empty collection ---------- */
.empty-collection{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-bottom:60px;
}
.empty-collection .h-title{ margin-bottom:8px; }
.empty-collection .h-sub{ margin-bottom:0; }
.empty-collection .h-micro{ margin-top:22px; }

/* ---------- Minimal account menu -- email + Sign out only ---------- */
.account-menu{
  position:absolute; top:54px; right:20px; z-index:41;
  width:230px;
  background:var(--panel-2);
  border:1px solid var(--hairline-strong);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
}
.account-menu .am-email{ font-size:12.5px; color:var(--paper); font-weight:500; margin-bottom:2px; word-break:break-all; }
.account-menu .am-sub{ font-size:11px; color:var(--muted-2); margin-bottom:16px; }
.account-menu .am-signout{
  width:100%; text-align:left; padding:10px 0 0;
  background:none; border:none; border-top:1px solid var(--hairline);
  color:var(--muted); font-size:13px; font-family:inherit; cursor:pointer;
}