/* =============================================================================
   "Now" — an adaptive first tab. Instead of a static details page, the Loop's
   home transforms across the gathering's lifecycle: BEFORE (prep + anticipation)
   → DURING (live) → AFTER (memories). Tabs stay tiny: Now · Bring · Wall.
   Neutral Zen so the idea, not the palette, is what you judge.
   ========================================================================== */
body { font-family: var(--font-ui); background: var(--color-surface-page); color: var(--color-text-primary); }
.wrap { inline-size: min(94vw, 28rem); margin-inline: auto; padding-block: var(--space-3) 8rem; }

.chrome { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2) var(--space-3); }
.chip { display: inline-grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); color: var(--color-text-primary); }
.chipRow { display: inline-flex; gap: var(--space-2); }
.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); }

/* demo control (clearly a demo affordance, not part of the design) */
.demo { position: fixed; inset-block-start: var(--space-3); inset-inline: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.demoInner { pointer-events: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: rgba(18,22,21,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.demoInner button { border: none; background: transparent; color: #cdd6d2; font-size: .72rem; font-weight: 700; padding: .35rem .8rem; border-radius: var(--radius-pill); letter-spacing: .04em; }
.demoInner button[aria-current='true'] { background: #eef2f0; color: #16211f; }
.demoTag { position: fixed; inset-block-start: calc(var(--space-3) + 2.4rem); inset-inline: 0; text-align: center; z-index: 40; font-size: .64rem; color: var(--color-text-subtle); pointer-events: none; }

/* phase-driven visibility */
.phase { display: none; flex-direction: column; gap: var(--space-4); }
.state[data-phase='before'] .phase.before,
.state[data-phase='during'] .phase.during,
.state[data-phase='after'] .phase.after { display: flex; }

/* hero */
.hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: var(--space-5); color: #fff; min-block-size: 12rem; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: var(--shadow); }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, var(--h1, var(--color-sky)), var(--h2, var(--color-accent-default)) 55%, var(--h3, var(--color-sage-deep))); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, #05100e 74%, transparent), transparent 60%); }
.hero > * { position: relative; }
.hero .eyebrow { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.hero h1 { font-size: var(--font-size-xxl); font-weight: 800; line-height: var(--line-tight); letter-spacing: var(--tracking-tight); margin-block-start: var(--space-1); }
.hero .big { font-size: var(--font-size-display); font-weight: 800; line-height: 1; }
.hero .row { display: flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-3); font-size: var(--font-size-sm); }
.live { display: inline-flex; align-items: center; gap: var(--space-1); padding: .15rem var(--space-2); border-radius: var(--radius-pill); background: var(--color-sage-deep); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.live .pulse { inline-size: 7px; block-size: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* cards */
.card { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); box-shadow: var(--shadow); }
.card--accent { background: var(--color-accent-soft); border-color: color-mix(in srgb, var(--color-accent-default) 30%, transparent); }
.card--sage { background: var(--color-sage-soft); border-color: color-mix(in srgb, var(--color-sage-deep) 24%, transparent); }
.lbl { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-subtle); }
.headline { font-size: var(--font-size-lg); font-weight: 700; margin-block-start: var(--space-1); }
.muted { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.mine { display: flex; align-items: center; gap: var(--space-3); }
.mine .g { display: grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-md); background: var(--color-accent-deep); color: var(--color-text-on-accent); flex: none; }
.mine b { display: block; font-size: var(--font-size-base); font-weight: 700; }
.mine span { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.rowitem { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); }
.rowitem + .rowitem { border-block-start: 1px solid var(--color-border-default); }
.rowitem .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: 700; color: var(--color-text-on-accent); background: linear-gradient(150deg, var(--color-sky), var(--color-accent-deep)); flex: none; }
.rowitem .b { flex: 1; min-inline-size: 0; font-size: var(--font-size-sm); }
.rowitem .b b { font-weight: 600; }
.chipbtn { padding: .2rem var(--space-3); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 700; border: none; }
.chipbtn.go { background: var(--color-accent-deep); color: var(--color-text-on-accent); }
.chipbtn.soft { background: var(--color-surface-sunken); color: var(--color-text-muted); }

.avs { display: inline-flex; }
.avs .a { inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill); display: grid; place-items: center; font-size: var(--font-size-xs); font-weight: 700; 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-raised); }
.avs .a + .a { margin-inline-start: calc(-1 * var(--space-3)); }

.pgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
.pgrid i { aspect-ratio: 1; border-radius: var(--radius-md); background: linear-gradient(140deg, color-mix(in srgb, var(--t1, var(--color-sky)) 62%, var(--color-surface-raised)), color-mix(in srgb, var(--t2, var(--color-sage-deep)) 66%, var(--color-surface-sunken))); }
.pgrid i.more { display: grid; place-items: center; background: var(--color-surface-sunken); color: var(--color-text-muted); font-weight: 700; font-size: var(--font-size-sm); }
.cta { display: block; inline-size: 100%; padding-block: var(--space-3); border: none; border-radius: var(--radius-pill); background: var(--color-accent-deep); color: var(--color-text-on-accent); font-size: var(--font-size-base); font-weight: 700; }

/* bottom nav */
.nav { position: fixed; inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom,0px)); inset-inline: 0; z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.navInner { pointer-events: auto; display: flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--color-surface-glass); border: 1px solid var(--color-border-default); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow-lg); }
.navInner button { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
.navInner button[aria-current='true'] { background: var(--color-accent-deep); color: var(--color-text-on-accent); }
.navInner .badge { font-size: .58rem; font-weight: 800; background: var(--color-rose); color: #fff; border-radius: 999px; padding: 0 .3rem; margin-inline-start: -.3rem; }