/* TERRAINVITE v53 — storage dashboard + birthday trio layout/media + invitation footer + mobile actions. */

/* 1) Birthday 10/11/12 must size themselves against the invitation canvas, not the browser viewport. */
.birthday-universal-trio {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  box-sizing: border-box;
}
.birthday-universal-trio *,
.birthday-universal-trio *::before,
.birthday-universal-trio *::after { box-sizing: border-box; }
.birthday-universal-trio .but-section {
  width: 100%;
  max-width: 100%;
  padding-left: max(22px, calc((100% - 980px) / 2));
  padding-right: max(22px, calc((100% - 980px) / 2));
}
.birthday-universal-trio .but-hero {
  width: 100%;
  max-width: 100%;
  padding-left: max(22px, calc((100% - 1120px) / 2));
  padding-right: max(22px, calc((100% - 1120px) / 2));
}
.birthday-universal-trio .but-hero-layout,
.birthday-universal-trio .but-hero-layout > *,
.birthday-universal-trio .but-hero-copy,
.birthday-universal-trio .but-photo-frame { min-width: 0; max-width: 100%; }
.birthday-universal-trio.but-legacy .but-crest {
  right: max(24px, calc((100% - 1120px) / 2));
}
.template-demo-canvas .birthday-universal-trio { margin-inline: auto; }

/* 2) Universal v3: restore the TERRAINVITE creation footer as a proper CTA. */
.universal-invite[data-universal-version="3"] .universal-project-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--u-bg) 18%, transparent);
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--u-accent) 16%, transparent), transparent 58%),
    var(--u-text);
  color: var(--u-bg);
}
.universal-invite[data-universal-version="3"] .universal-project-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--u-bg) 44%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--u-bg) 8%, transparent);
  color: inherit;
  font-family: Inter, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.universal-invite[data-universal-version="3"] .universal-project-footer a::after {
  content: "↗";
  margin-left: 9px;
  font-size: .95em;
}
.universal-invite[data-universal-version="3"] .universal-project-footer a:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--u-bg) 14%, transparent);
  border-color: color-mix(in srgb, var(--u-bg) 70%, transparent);
}

/* 3) My invitations: all primary actions stay on one clean row on mobile. */
@media (max-width: 560px) {
  .invite-card-actions-primary.has-published-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px 42px;
    align-items: stretch;
    gap: 7px;
  }
  .invite-card-actions-primary.has-draft-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: stretch;
    gap: 7px;
  }
  .invite-card-actions-primary .compact-action {
    min-width: 0;
    width: 100%;
    min-height: 42px;
    margin: 0;
  }
  .invite-card-actions-primary .invite-main-action,
  .invite-card-actions-primary > .ghost-button:not(.invite-share-action) {
    justify-content: center;
    white-space: nowrap;
  }
  .invite-card-actions-primary .invite-share-action,
  .invite-card-actions-primary .invite-more-wrap,
  .invite-card-actions-primary .invite-more-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    margin: 0;
  }
  .invite-card-actions-primary .invite-more-wrap { display: block; }
  .invite-card-actions-primary .invite-more-button { display: grid; place-items: center; }
}
@media (max-width: 390px) {
  .invite-card-actions-primary.has-published-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px 40px; gap: 5px; }
  .invite-card-actions-primary .compact-action { padding-inline: 7px; font-size: 11px; }
  .invite-card-actions-primary .invite-share-action,
  .invite-card-actions-primary .invite-more-wrap,
  .invite-card-actions-primary .invite-more-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
}

/* 4) Admin > Storage. */
.storage-admin { display: grid; gap: 18px; }
.storage-admin-head { gap: 18px; }
.storage-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.storage-layout { display: grid; gap: 16px; }
.storage-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.storage-metric,
.storage-status-card,
.storage-kind-card,
.storage-footer-card {
  border: 1px solid rgba(37,49,41,.10);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(37,31,25,.035);
}
.storage-metric { min-height: 134px; padding: 18px; display: flex; align-items: flex-start; gap: 13px; }
.storage-metric.is-cloud { background: linear-gradient(145deg,#17281f,#21372c); color: #fff; border-color: transparent; }
.storage-metric-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; background: #f1eee8; color: #23342b; }
.storage-metric.is-cloud .storage-metric-icon { background: rgba(255,255,255,.10); color: #fff; }
.storage-metric > div { min-width: 0; display: grid; gap: 3px; }
.storage-metric small { color: #81786e; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.storage-metric.is-cloud small { color: rgba(255,255,255,.65); }
.storage-metric strong { font-size: clamp(20px,2vw,30px); letter-spacing: -.04em; }
.storage-metric span:not(.storage-metric-icon) { color: #81786e; font-size: 11px; }
.storage-metric.is-cloud span:not(.storage-metric-icon) { color: rgba(255,255,255,.68); }
.storage-status-card { padding: 22px; }
.storage-status-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.storage-status-top > div { display: grid; gap: 5px; }
.storage-status-top small { color: #81786e; font-size: 11px; }
.storage-status-top strong { display: inline-flex; align-items: center; gap: 7px; font-size: 20px; }
.storage-state { padding: 7px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.storage-state.is-ok { background: #e5f2e9; color: #23633c; }
.storage-state.is-warn { background: #f8ebdc; color: #8b5420; }
.storage-distribution { height: 8px; margin: 20px 0; overflow: hidden; border-radius: 999px; background: #eeeae4; }
.storage-distribution span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: #22382d; transition: width .3s ease; }
.storage-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.storage-facts > div { min-width: 0; padding: 12px; border-radius: 13px; background: #f8f6f2; display: grid; gap: 4px; }
.storage-facts span { color: #81786e; font-size: 10px; }
.storage-facts strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.storage-kind-card { padding: 20px; }
.storage-kind-card h3 { margin: 0 0 13px; font-size: 17px; }
.storage-kind-grid { display: grid; gap: 7px; }
.storage-kind-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #f8f6f2; }
.storage-kind-row span { font-size: 12px; color: #6f675f; }
.storage-kind-row strong { font-size: 12px; }
.storage-footer-card { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.storage-footer-card p { margin: 0; max-width: 720px; color: #736b62; font-size: 12px; line-height: 1.55; }
.storage-footer-card .ghost-button { flex: 0 0 auto; }
.storage-notice { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 14px; font-size: 12px; }
.storage-notice.is-success { background: #e8f3ea; color: #225d38; border: 1px solid #cfe4d4; }
.storage-notice.is-error { background: #faeaea; color: #8b3838; border: 1px solid #f0cece; }
@media (max-width: 980px) {
  .storage-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .storage-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .storage-head-actions { width: 100%; justify-content: stretch; }
  .storage-head-actions > * { flex: 1 1 0; justify-content: center; }
  .storage-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .storage-metric { min-height: 118px; padding: 14px; gap: 9px; }
  .storage-metric-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .storage-facts { grid-template-columns: 1fr; }
  .storage-footer-card { align-items: stretch; flex-direction: column; }
  .storage-footer-card .ghost-button { width: 100%; justify-content: center; }
}