/* =============================================================================
   Canvas — a DESIGN (organization): the gathering laid out in SPACE, not a list.
   A pannable board with the venue at the center and each section as a card placed
   around it, joined by paths — like a little map of the night. Neutral Zen.
   ========================================================================== */
html, body { block-size: 100%; }
body { font-family: var(--font-ui); color: var(--color-text-primary);
  background-color: var(--color-surface-sunken);
  background-image: radial-gradient(color-mix(in srgb, var(--color-text-primary) 8%, transparent) 1px, transparent 1px);
  background-size: 1.4rem 1.4rem; overflow: hidden; }

.chrome { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 20; 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); }
.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); box-shadow: var(--shadow); }
.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); }
.hint { position: fixed; inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom,0px)); inset-inline: 0; text-align: center; z-index: 20; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.hint span { background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); box-shadow: var(--shadow); }

/* the board (bigger than the viewport → spatial) */
.board { position: relative; inline-size: 100vw; block-size: 100dvh; }
.paths { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 1; }
.paths line { stroke: color-mix(in srgb, var(--color-accent-default) 34%, transparent); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }

.place, .zone { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
/* center place */
.place { inset-block-start: 46%; inset-inline-start: 50%; inline-size: 12rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); }
.place .cover { aspect-ratio: 16 / 10; background: radial-gradient(60% 50% at 34% 28%, color-mix(in srgb, #fff 40%, transparent), transparent 55%), linear-gradient(155deg, var(--color-sky), var(--color-accent-default) 55%, var(--color-sage-deep)); }
.place .body { padding: var(--space-3); }
.place .eyebrow { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-subtle); }
.place h1 { font-size: var(--font-size-base); font-weight: 800; line-height: var(--line-tight); margin-block-start: 0.2rem; }
.place .meta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-block-start: 0.2rem; }

/* zone cards */
.zone { inline-size: 8.5rem; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); box-shadow: var(--shadow); }
.zone .g { display: grid; place-items: center; inline-size: var(--control-sm); block-size: var(--control-sm); border-radius: var(--radius-md); color: #fff; margin-block-end: var(--space-2); }
.zone b { display: block; font-size: var(--font-size-base); font-weight: 700; }
.zone span { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.zone .mini { display: flex; gap: 0.3rem; margin-block-start: var(--space-2); }
.zone .mini i { inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--radius-sm); background: linear-gradient(140deg, color-mix(in srgb, var(--t1, var(--color-sky)) 60%, var(--color-surface-raised)), color-mix(in srgb, var(--t2, var(--color-sage-deep)) 64%, var(--color-surface-sunken))); }
.zone .avs { display: inline-flex; margin-block-start: var(--space-2); }
.zone .avs i { inline-size: 1.4rem; block-size: 1.4rem; border-radius: 999px; display: grid; place-items: center; font-size: 0.56rem; font-weight: 700; color: #fff; background: linear-gradient(150deg, var(--color-sky), var(--color-accent-deep)); box-shadow: 0 0 0 1.5px var(--color-surface-raised); }
.zone .avs i + i { margin-inline-start: -0.5rem; }