/* Attendee-page furniture on top of hp.css: page column, cards, tiles, chips, the
   home's Now strip and live banner. Tokens only — no raw colours. Link after hp.css. */

.page {
  max-width: 34rem; margin: 0 auto;
  padding: var(--s-5) max(var(--s-4), env(safe-area-inset-right)) var(--s-8) max(var(--s-4), env(safe-area-inset-left));
}
.page > h1 { margin: 0 0 var(--s-1); }
.page > .lede { color: var(--fg-medium); margin: 0 0 var(--s-5); font-size: 16px; line-height: 24px; }
.stack { display: grid; gap: var(--s-3); }
.stack > .card, .page > .card { margin: 0 0 var(--s-3); }

.card-title {
  display: flex; align-items: center; gap: var(--s-2); justify-content: space-between;
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-light); margin: 0 0 var(--s-2);
}
.card-title a { text-transform: none; letter-spacing: 0; font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; }
.card h2.subtitle-regular, .card h3 { margin: 0 0 var(--s-1); }
.muted { color: var(--fg-light); }
.small { font-size: 14px; line-height: 20px; }
.msg { font-size: 14px; line-height: 20px; margin-top: var(--s-2); min-height: 20px; }
.msg[data-kind="ok"] { color: var(--positive); }
.msg[data-kind="bad"] { color: var(--attention); }

a { color: var(--primary); }
a:focus-visible { outline: 2px solid var(--stroke-focus); outline-offset: 2px; }
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.btn-row > .btn { flex: 1 1 auto; }
/* The app's front door as a QR for laptops: a white tile (scanners need the quiet zone)
   next to the typed address for whoever would rather not point a camera at a screen. */
.app-qr { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.app-qr img { flex: none; width: 128px; height: 128px; padding: 6px; background: #FFFFFF; border: 1px solid var(--stroke); border-radius: var(--r-2); }
.app-qr p { margin: 0; }
.app-qr-host { color: var(--fg); overflow-wrap: anywhere; }
.ext::after { content: ' ↗'; }

/* ---- tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
@media (max-width: 360px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-1);
  min-height: 76px; padding: var(--s-3); border-radius: var(--r-2);
  background: var(--bg); border: 1px solid var(--stroke); color: var(--fg);
  font: inherit; font-size: 14px; line-height: 18px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.tile:hover { border-color: var(--stroke-strong); background: var(--bg-container); }
.tile:focus-visible { outline: 2px solid var(--stroke-focus); outline-offset: 2px; }
.tile .count {
  position: absolute; top: var(--s-2); right: var(--s-2); min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--primary); color: var(--primary-fg);
  font-size: 12px; line-height: 22px; text-align: center;
}

/* ---- chips (place, status) ---- */
.chip-place {
  display: inline-flex; align-items: center; gap: var(--s-1); flex-wrap: wrap;
  font-size: 14px; line-height: 20px; color: var(--fg-medium);
}
.chip-place a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-2);
  border-radius: var(--r-full); background: var(--primary-tint); text-decoration: none; font-weight: 600; font-size: 12px; }

/* ---- Now strip ---- */
.now { background: var(--bg); border: 1px solid var(--stroke); border-left: 4px solid var(--primary); }
.now .when { font-size: 14px; line-height: 20px; color: var(--fg-light); font-weight: 600; }
.now .what { font-size: 20px; line-height: 24px; font-weight: 600; margin: var(--s-1) 0; }

/* ---- live banner ---- */
.live { display: grid; gap: var(--s-2); }
.live a {
  display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2); background: var(--primary); color: var(--primary-fg); text-decoration: none; font-weight: 600;
}
.live a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none;
  animation: live-pulse 1.6s var(--ease) infinite; }
.live a::after { content: '›'; margin-left: auto; font-size: 20px; }
@keyframes live-pulse { 50% { opacity: .3; } }

/* ---- capture ---- */
.capture-btn { width: 100%; min-height: 56px; font-size: 18px; }

/* ---- agenda lists ---- */
.agenda-item { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--stroke); }
.agenda-item:first-child { border-top: 0; padding-top: 0; }
.agenda-item .t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--fg-medium); }
.agenda-item .title { font-size: 16px; line-height: 20px; font-weight: 600; }
.agenda-item .tags { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-1); }
.agenda-item[data-past] { opacity: .6; }
.agenda-item[data-now] .title::after { content: ' · now'; color: var(--primary); }

/* ---- feed preview ---- */
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); }
.thumbs img, .thumbs span { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-1); background: var(--bg-sunken); display: block; }

/* ---- weather ---- */
.weather { display: flex; align-items: baseline; gap: var(--s-3); }
.weather .temp { font-size: 32px; line-height: 32px; font-weight: 600; }

/* ---- inputs outside .field (short forms on home) ---- */
.input, textarea.input {
  font: inherit; font-size: 16px; line-height: 24px; width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3);
  color: var(--fg); background: var(--bg); border: 1px solid var(--stroke-strong); border-radius: var(--r-1);
}
.input:focus { outline: none; border-color: var(--stroke-focus); box-shadow: 0 0 0 1px var(--stroke-focus); }

/* ---- dialog sheet ---- */
dialog.sheet { border: 0; padding: var(--s-6) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); width: min(100%, 30rem);
  max-width: 100%; margin: auto auto 0; border-radius: var(--r-4) var(--r-4) 0 0; background: var(--bg); color: var(--fg); }
dialog.sheet::backdrop { background: rgb(0 0 0 / .45); }

/* ---- toggles row (Me) ---- */
.setting { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--stroke); min-height: 56px; }
.setting:first-of-type { border-top: 0; }
.setting .grow { flex: 1; min-width: 0; }
.setting .grow > div:first-child { font-weight: 600; font-size: 16px; line-height: 20px; }
.avatar { width: 64px; height: 64px; border-radius: var(--r-full); object-fit: cover; background: var(--bg-sunken);
  display: grid; place-items: center; font-weight: 600; font-size: 24px; color: var(--fg-medium); flex: none; }

/* ---- compat: the older single-file attendee pages (activities, qa, followup,
   headshot, map) on the brand. <body class="compat">; their markup stays. ---- */
.compat main { max-width: 34rem; margin: 0 auto;
  padding: var(--s-5) max(var(--s-4), env(safe-area-inset-right)) var(--s-8) max(var(--s-4), env(safe-area-inset-left)); }
.compat main > h1 { font-size: 24px; line-height: 28px; font-weight: 600; margin: 0 0 var(--s-1); }
.compat p.sub { margin: 0 0 var(--s-5); color: var(--fg-medium); font-size: 16px; line-height: 24px; }
.compat .card { margin-bottom: var(--s-3); }
.compat .card h2 { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-light); margin: 0 0 var(--s-2); }
.compat button:not(.as-btn):not(.option):not(.vote-btn):not(.tile) {
  font: inherit; font-size: 16px; line-height: 20px; font-weight: 600; min-height: 44px; padding: var(--s-3) var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-1); cursor: pointer;
  background: var(--action); color: var(--action-fg); transition: background-color .15s var(--ease); }
.compat button:not(.as-btn):not(.option):not(.vote-btn):not(.tile):hover { background: var(--action-hover); }
.compat button.alt { background: transparent !important; color: var(--neutral) !important; border-color: var(--neutral) !important; }
.compat button.warn { background: var(--warning) !important; color: var(--bg) !important; }
.compat button.danger { background: var(--attention) !important; color: var(--bg) !important; }
.compat button:disabled { background: var(--bg-sunken) !important; color: var(--fg-disabled) !important; border-color: transparent !important; cursor: default; }
.compat button:focus-visible { outline: 2px solid var(--stroke-focus); outline-offset: 2px; }
.compat input:not([type=checkbox]):not([type=radio]):not([type=range]), .compat select, .compat textarea {
  font: inherit; font-size: 16px; line-height: 24px; min-height: 44px; padding: var(--s-2) var(--s-3); width: 100%;
  color: var(--fg); background: var(--bg); border: 1px solid var(--stroke-strong); border-radius: var(--r-1); }
.compat input:focus, .compat select:focus, .compat textarea:focus { outline: none; border-color: var(--stroke-focus); box-shadow: 0 0 0 1px var(--stroke-focus); }
.compat input[type=checkbox], .compat input[type=radio], .compat input[type=range] { accent-color: var(--primary); }
.compat label { color: var(--fg-medium); }
.compat .ok { color: var(--positive); }
.compat .bad { color: var(--attention); }
.compat .empty { color: var(--fg-light); }
.compat .pill { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 600; padding: 2px var(--s-2);
  border-radius: var(--r-full); background: var(--info-tint); color: var(--info); }

/* Staff tools that are lists or forms rather than a scanner: use the width on a laptop. */
@media (min-width: 60rem) { .page.page-wide { max-width: 72rem; } }