/* =============================================================================
   Bento — a DESIGN (organization), not a theme. The whole Loop as a modular
   glanceable tile grid: cover, plan, roster, and peeks into Spread/List/Wall
   are all visible at once; each tile IS the way into that section (no bottom
   tab bar). Shown in the neutral Zen palette so you judge the STRUCTURE.
   Token-only / port-grade.
   ========================================================================== */

body { font-family: var(--font-ui); background: var(--color-surface-page); color: var(--color-text-primary); }

.wrap { inline-size: min(94vw, 32rem); margin-inline: auto; padding-block: var(--space-3) var(--space-8); }

.chrome { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2) var(--space-3); }
.chrome .brand { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0.14em; text-transform: lowercase; color: var(--color-text-muted); }
.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); }

/* the bento grid */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tile {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  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); text-align: start; color: inherit; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tile .cap { display: 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; color: var(--color-text-subtle); }
.tile .cap .dot { color: var(--color-accent-deep); }
.tile .big { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--line-tight); }
.tile .small { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.wide { grid-column: 1 / -1; }

/* cover tile */
.cover { grid-column: 1 / -1; min-block-size: 13rem; justify-content: flex-end; color: #fff; padding: var(--space-5); border: none; }
.cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, var(--color-sky), var(--color-accent-default) 52%, var(--color-sage-deep)); }
.cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, #05100e 72%, transparent), transparent 62%); }
.cover > * { position: relative; }
.coverTop { display: flex; justify-content: space-between; align-items: flex-start; margin-block-end: auto; }
.badge { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: color-mix(in srgb, #05100e 40%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); }
.countdown { display: inline-flex; gap: var(--space-2); }
.countdown b { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.coverTitle { font-size: var(--font-size-xxl); font-weight: var(--font-weight-heavy); line-height: var(--line-tight); letter-spacing: var(--tracking-tight); }
.coverMeta { display: flex; align-items: center; gap: var(--space-2); margin-block-start: var(--space-2); font-size: var(--font-size-sm); }

/* plan glyphs */
.glyph { display: grid; place-items: center; inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: var(--radius-md); flex: none; }
.g-when { background: var(--color-sage-soft); color: var(--color-sage-deep); }
.g-where { background: var(--color-sky-soft); color: var(--color-sky-deep); }
.g-spread { background: var(--color-sage-soft); color: var(--color-sage-deep); }
.g-list { background: var(--color-sky-soft); color: var(--color-sky-deep); }
.g-wall { background: var(--color-rose-soft); color: var(--color-rose-deep); }

/* roster tile */
.avatars { display: inline-flex; }
.avatar { 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-sm); 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-raised); }
.avatar + .avatar { margin-inline-start: calc(-1 * var(--space-3)); }
.rosterRow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

/* peek thumbs (wall) */
.thumbs { display: flex; gap: var(--space-2); }
.thumbs i { flex: 1; aspect-ratio: 1; border-radius: var(--radius-sm); 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))); }

/* count chips */
.mini { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.1rem var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-sunken); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.arrow { position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-4); color: var(--color-text-subtle); }

/* note tile */
.note { background: var(--color-sage-soft); border-color: color-mix(in srgb, var(--color-sage-deep) 22%, transparent); }
.note .q { font-size: var(--font-size-base); line-height: var(--line-relaxed); color: var(--color-text-primary); }
.note .by { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }