/* =============================================================================
   Production — a real, shippable Loop screen. Benchmark: Luma / Partiful / Apple
   Invites. Real photo cover, familiar confident patterns, real density, tight
   polish. Cool Zen tokens throughout → ports straight into the feature files.
   ========================================================================== */
body { font-family: var(--font-ui); background: var(--color-surface-page); color: var(--color-text-primary); }
.app { inline-size: min(100vw, 30rem); margin-inline: auto; padding-block-end: 5.5rem; position: relative; }
.i { inline-size: var(--icon-md); block-size: var(--icon-md); stroke: currentcolor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* ---- cover ---- */
.cover { position: relative; block-size: 54vh; min-block-size: 21rem; overflow: hidden; }
.cover > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cover::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(to bottom, color-mix(in srgb, #0b1110 44%, transparent), transparent 22% 52%, color-mix(in srgb, #0b1110 82%, transparent)); }
.coverChrome { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-3); }
.gbtn { display: inline-grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill);
  background: color-mix(in srgb, #0b1110 34%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; border: none; }
.gbtnRow { display: inline-flex; gap: var(--space-2); }
.coverText { position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 3; padding: var(--space-5) var(--space-5) var(--space-6); color: #fff; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.92; }
.eyebrow .dot { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentcolor; }
.title { margin-block-start: var(--space-2); font-size: var(--font-size-xxl); font-weight: var(--font-weight-heavy); line-height: 1.04; letter-spacing: var(--tracking-tight); text-wrap: balance; }

/* ---- sheet ---- */
.sheet { position: relative; z-index: 4; margin-block-start: calc(-1 * var(--space-5)); border-start-start-radius: var(--radius-xl); border-start-end-radius: var(--radius-xl);
  background: var(--color-surface-page); padding: var(--space-5) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.grip { position: absolute; inset-block-start: var(--space-2); inset-inline: 0; margin-inline: auto; inline-size: 2.2rem; block-size: 4px; border-radius: 999px; background: var(--color-border-strong); }

/* host + going */
.hostRow { display: flex; align-items: center; gap: var(--space-3); margin-block-start: var(--space-1); }
.facepile { display: inline-flex; }
.facepile .a { inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: var(--radius-pill); display: grid; place-items: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-on-accent); background: linear-gradient(150deg, var(--color-sky), var(--color-accent-deep)); box-shadow: 0 0 0 2px var(--color-surface-page); overflow: hidden; }
.facepile .a img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.facepile .a + .a { margin-inline-start: calc(-1 * var(--space-3)); }
.hostRow .txt { flex: 1; min-inline-size: 0; font-size: var(--font-size-sm); }
.hostRow .txt b { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.hostRow .txt span { color: var(--color-text-muted); }

/* info rows (date / location) */
.infoCard { background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden; }
.infoRow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.infoRow + .infoRow { border-block-start: 1px solid var(--color-border-default); }
.infoRow .tile { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md); flex: none; }
.tile-date { background: var(--color-sage-soft); color: var(--color-sage-deep); }
.tile-loc { background: var(--color-sky-soft); color: var(--color-sky-deep); }
.infoRow .body { flex: 1; min-inline-size: 0; }
.infoRow .body b { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: var(--line-snug); }
.infoRow .body span { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.infoRow .go { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-sunken); color: var(--color-text-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border: none; }

/* RSVP */
.rsvp { display: flex; flex-direction: column; gap: var(--space-2); }
.rsvp .q { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.rsvpBtns { display: flex; gap: var(--space-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--control-lg); border-radius: var(--radius-pill); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); border: none; }
.btn-primary { flex: 2; background: var(--color-accent-deep); color: var(--color-text-on-accent); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--color-accent-deep) 80%, transparent); }
.btn-ghost { flex: 1; background: var(--color-surface-raised); border: 1px solid var(--color-border-default); color: var(--color-text-primary); }

/* section */
.section { display: flex; flex-direction: column; gap: var(--space-2); }
.section > h2 { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-subtle); }
.about { font-size: var(--font-size-base); line-height: var(--line-relaxed); color: var(--color-text-primary); }
.about .more { color: var(--color-accent-deep); font-weight: var(--font-weight-semibold); }

/* bring card */
.bring { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); }
.bring .tile { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent-deep); flex: none; }
.bring .body { flex: 1; min-inline-size: 0; }
.bring .body b { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.bring .body span { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.bar { margin-block-start: var(--space-2); block-size: 5px; border-radius: 999px; background: var(--color-surface-sunken); overflow: hidden; }
.bar > i { display: block; block-size: 100%; inline-size: 75%; border-radius: 999px; background: var(--color-sage-deep); }
.bring .chev { color: var(--color-text-subtle); flex: none; }

/* good to know */
.gtk { display: flex; flex-direction: column; }
.gtkRow { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.gtkRow + .gtkRow { border-block-start: 1px solid var(--color-border-default); }
.gtkRow .tile { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-sm); flex: none; font-size: var(--font-size-sm); }
.gtkRow b { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.gtkRow span { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* guests */
.guestGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3) var(--space-2); }
.guest { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.guest .a { inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-pill); display: grid; place-items: center; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-text-on-accent); background: linear-gradient(150deg, var(--color-sky), var(--color-accent-deep)); overflow: hidden; }
.guest .a img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.guest .n { font-size: 0.6rem; color: var(--color-text-muted); max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seeAll { align-self: flex-start; margin-block-start: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-accent-deep); background: none; border: none; padding: 0; }

/* bottom tab bar */
.tabbar { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 20; display: flex; justify-content: center; pointer-events: none; }
.tabbarIn { pointer-events: auto; inline-size: min(100vw, 30rem); display: flex; justify-content: space-around; padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface-glass); border-block-start: 1px solid var(--color-border-default); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
.tabbarIn button { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; border: none; background: none; color: var(--color-text-subtle); font-size: 0.62rem; font-weight: var(--font-weight-semibold); }
.tabbarIn button.on { color: var(--color-accent-deep); }