/* =============================================================================
   Deck — a DESIGN (organization): the Loop as a swipeable deck of full-screen
   cards (Plan → Spread → List → Wall), like stories. One thing at a time,
   immersive, gesture-driven — story progress bars up top instead of tabs.
   Neutral Zen palette so you judge the structure.
   ========================================================================== */

html, body { block-size: 100%; }
body { font-family: var(--font-ui); background: var(--color-surface-sunken); color: var(--color-text-primary); overflow: hidden; }

.deck { display: flex; flex-direction: column; block-size: 100dvh; inline-size: min(100vw, 30rem); margin-inline: auto; padding: var(--space-2) var(--space-2) var(--space-3); }

/* story progress + chrome */
.bars { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-1); }
.bars i { flex: 1; block-size: 3px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-text-primary) 18%, transparent); overflow: hidden; }
.bars i.on { background: color-mix(in srgb, var(--color-text-primary) 18%, transparent); }
.bars i.on::after { content: ''; display: block; block-size: 100%; inline-size: 45%; background: var(--color-accent-deep); border-radius: var(--radius-pill); }
.bars i.done::after { content: ''; display: block; block-size: 100%; inline-size: 100%; background: var(--color-accent-deep); }
.topRow { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) var(--space-2) var(--space-3); }
.topRow .who { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.chip { display: inline-grid; place-items: center; inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: var(--radius-pill); background: transparent; border: none; color: var(--color-text-muted); }
.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); }
.mini-ava { 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)); }

/* the swipeable track */
.track { flex: 1; display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: center; flex: 0 0 100%; block-size: 100%; border-radius: var(--radius-xl); overflow: hidden; position: relative; display: flex; flex-direction: column; background: var(--color-surface-raised); box-shadow: var(--shadow-lg); }
.card-inner { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); block-size: 100%; overflow: hidden; }
.kicker { display: inline-flex; align-items: center; gap: var(--space-2); 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); }
.kicker .g { display: grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: var(--radius-sm); color: var(--color-text-on-accent); }

/* Plan card = immersive cover */
.card--plan { color: #fff; justify-content: flex-end; }
.card--plan::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, var(--color-sky), var(--color-accent-default) 50%, var(--color-sage-deep)); }
.card--plan::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, #05100e 82%, transparent), transparent 60%); }
.card--plan .card-inner { position: relative; justify-content: flex-end; }
.plan-title { font-size: var(--font-size-display); font-weight: var(--font-weight-heavy); line-height: 0.98; letter-spacing: var(--tracking-tight); }
.plan-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.plan-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, #05100e 30%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.plan-row .g { display: grid; place-items: center; inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: var(--radius-sm); background: rgba(255,255,255,.22); flex: none; }
.plan-row b { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); display: block; }
.plan-row span { font-size: var(--font-size-xs); opacity: .82; }
.plan-foot { display: flex; align-items: center; justify-content: space-between; }
.avatars { display: inline-flex; }
.avatars .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: var(--font-weight-bold); color: var(--color-accent-deep); background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-default) 60%, transparent); }
.avatars .a + .a { margin-inline-start: calc(-1 * var(--space-3)); }
.cta { padding: var(--space-3) var(--space-6); border: none; border-radius: var(--radius-pill); background: #fff; color: var(--color-accent-deep); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }

/* content cards */
.item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-surface-soft); }
.item .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)); flex: none; }
.item .b { flex: 1; min-inline-size: 0; }
.item .b b { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.item .b span { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.pill { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: 0.1rem var(--space-2); border-radius: var(--radius-pill); }
.pill-food { background: var(--color-sage-soft); color: var(--color-sage-deep); }
.pill-open { background: var(--color-sky-soft); color: var(--color-sky-deep); }
.card-h { font-size: var(--font-size-xl); font-weight: var(--font-weight-heavy); letter-spacing: var(--tracking-tight); }
.card-sub { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-block-start: calc(-1 * var(--space-2)); }
.wallgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.wallgrid 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))); }
.list-add { margin-block-start: auto; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); border: 1.5px dashed var(--color-border-strong); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

.hint { text-align: center; font-size: var(--font-size-xs); color: var(--color-text-subtle); padding-block-start: var(--space-2); }