/* andAndrea, group calls inside the app (call.js). Phone first. The room
 * sits over the page it was opened from; the glass sheets (z 1200) open
 * above it. Matches the mockups Brad approved on 2026-10-19. */

html.aac-open, html.aac-open body { overflow: hidden; }
/* Sheets during a call are nearly solid: see-through, "End the call for
   everyone?" was hard to read over her photos (Brad, 2026-10-25), as in the
   Studio. */
html.aac-open .aa-glass { background: rgba(255, 255, 255, 0.96); }
html.aac-open .aa-sheet-veil { background: rgba(20, 8, 14, 0.4); }

.aac { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.aac > * { pointer-events: auto; }
.aac-audio { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- The room ---------- */
.aac-room {
  position: absolute; inset: 0; background: var(--paper, #fff); color: var(--ink, #1a1a1a);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  font-family: var(--font-body);
}
.aac[data-view="mini"] .aac-room { display: none; }

.aac-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.aac-title { flex: 1; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.aac-right { min-width: 44px; display: flex; justify-content: flex-end; }
.aac-iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--ink); border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aac-iconbtn svg { width: 24px; height: 24px; }
.aac-leave { border: 0; background: none; font: inherit; font-weight: 700; font-size: 0.95rem; color: #c0392b; padding: 10px 6px; cursor: pointer; }

.aac-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.aac-center { margin: auto; color: var(--muted); }
.aac-ctitle { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.aac-meta { margin: -6px 0 0; font-size: 0.85rem; color: var(--muted); }
.aac-livetag { color: var(--magenta); font-weight: 700; }
.aac-rec { color: #c0392b; font-weight: 700; }
.aac-note { margin: 0; font-size: 0.9rem; color: var(--muted); text-align: center; }
.aac-note.warn { background: #fff4e5; color: #8a5300; border-radius: 12px; padding: 8px 12px; }
.aac-small { margin: 0; font-size: 0.82rem; color: var(--muted); }
.aac-small.center { text-align: center; }
.aac-muted { color: var(--muted); }

.aac-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; vertical-align: 1px; }
.blink { animation: aac-blink 1.4s steps(2, start) infinite; }
@keyframes aac-blink { to { visibility: hidden; } }
.aac-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.aac-pill.rec { background: #fff; color: #c0392b; border: 1px solid rgba(192, 57, 43, 0.35); }

/* faces */
.aac-face { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.3rem; background: #c9b8c0; flex: none; }
.aac-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.aac-face.sm { width: 28px; height: 28px; font-size: 0.72rem; border: 2px solid var(--paper, #fff); }
.aac-face.md { width: 38px; height: 38px; font-size: 0.9rem; }
.aac-face.lg { width: 96px; height: 96px; font-size: 2rem; }
.aac-face.talk::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid var(--magenta); animation: aac-talk 1.1s ease-in-out infinite; }
@keyframes aac-talk { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.55; } }
.aac-micoff { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.aac-micoff svg { width: 13px; height: 13px; color: #c0392b; }

/* stage */
.aac-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 4px; justify-items: center; text-align: center; padding: 4px 0; }
.aac-stage .aac-face { width: 58px; height: 58px; font-size: 1.2rem; }
.aac-spk { display: grid; justify-items: center; gap: 2px; min-width: 0; width: 100%; border: 0; background: none; font: inherit; color: inherit; padding: 0; cursor: default; -webkit-tap-highlight-color: transparent; }
button.aac-spk { cursor: pointer; }
.aac-spk.dim { opacity: 0.55; }
.aac-ringwrap { position: relative; display: grid; place-items: center; padding: 5px; border-radius: 50%; }
.aac-ringwrap.timed { --p: 1; background: conic-gradient(var(--magenta) calc(var(--p) * 360deg), rgba(218, 24, 132, 0.15) 0); }
.aac-ringwrap.timed > .aac-face { box-shadow: 0 0 0 3px var(--paper, #fff); }
.aac-n { font-size: 0.82rem; font-weight: 700; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aac-r { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.aac-r.host { color: var(--magenta); font-weight: 700; }

.aac-handup { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 0.8rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

/* buttons */
.aac-dock { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
/* The buttons stay at the foot of the screen however full the room is; faces
   scroll under them, fading out above. */
.aac-foot { margin: auto -16px -16px; position: sticky; bottom: -16px; padding: 0 16px 16px; background: var(--paper, #fff); display: grid; gap: 12px; z-index: 1; }
/* Its background runs edge to edge, so a photo's outline scrolling under it can't peek out at the side. */
.aac-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; background: linear-gradient(to top, var(--paper, #fff), rgba(255, 255, 255, 0)); pointer-events: none; }
.aac-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 99px; padding: 13px 16px; font: inherit; font-weight: 700; font-size: 0.95rem; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aac-btn.pri { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.aac-btn.red { border-color: #c0392b; color: #c0392b; }
.aac-btn.on { background: var(--blush); border-color: var(--magenta); color: var(--magenta); }
.aac-btn.sm { flex: none; padding: 7px 12px; font-size: 0.82rem; }
.aac-emo { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #f3f1f2; display: grid; place-items: center; font-size: 1.25rem; flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aac-emo:active, .aac-btn:active { transform: scale(0.97); }
/* A member's written question (2026-11-01): a bar that looks like a field,
   over the emojis. */
.aac-askbar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 8px; padding: 0 16px; border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 99px; background: #fff; font: inherit; font-size: 0.95rem; color: var(--muted); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aac-askbar svg { width: 20px; height: 20px; flex: none; color: var(--magenta); }
.aac-askbar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aac-askbar:active { transform: scale(0.98); }
.aac-askbar + .aac-dock { padding-top: 0; }
/* The box it opens, over the room: everything at the top, so the keyboard
   rising from the bottom never covers the field or Send. */
.aac-ask { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: var(--paper, #fff); padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); }
.aac-ask[hidden], .aac[data-view="mini"] .aac-ask { display: none; }
.aac-askbody { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 560px; margin: 0 auto; padding: 14px 16px 16px; display: grid; align-content: start; gap: 12px; }
.aac-asknote { margin: 0; font-size: 0.9rem; color: var(--muted); }
/* 16px so an iPhone doesn't zoom in on it. */
.aac-asktext { display: block; width: 100%; box-sizing: border-box; min-height: 112px; resize: none; border: 1.5px solid var(--magenta); border-radius: 16px; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); background: #fff; }
.aac-asktext:focus { outline: none; box-shadow: 0 0 0 3px rgba(218, 24, 132, 0.15); }
.aac-askerr { margin: 0; font-size: 0.88rem; color: #c0392b; }
.aac-askerr[hidden] { display: none; }
.aac-ask .aac-btn { flex: none; }
.aac-ask .aac-btn:disabled { opacity: 0.6; }
.aac-mine { display: grid; gap: 8px; margin-top: 4px; }
.aac-mine div { padding: 10px 12px; border-radius: 14px; background: #faf7f8; }
.aac-mine p { margin: 0 0 2px; font-size: 0.92rem; overflow-wrap: anywhere; }
.aac-mine span { font-size: 0.78rem; font-weight: 700; color: var(--magenta); }
.aac-bigmicwrap { display: grid; justify-items: center; gap: 8px; position: relative; }
/* The mute reminder: a bubble over her mic, the mic breathing under it. */
.aac-nudge { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(290px, calc(100vw - 48px)); background: var(--magenta); color: #fff; border-radius: 16px; padding: 10px 14px; font-size: 0.88rem; line-height: 1.35; text-align: center; box-shadow: 0 8px 24px rgba(218, 24, 132, 0.28); z-index: 2; }
.aac-nudge b { display: block; font-size: 0.95rem; }
.aac-nudge::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--magenta); }
.aac-nudge[hidden] { display: none; }
.aac-bigmic.nudge, .aac-mb.nudge { animation: aac-nudge 1.6s ease-in-out infinite; }
@keyframes aac-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(218, 24, 132, 0.5); } 50% { box-shadow: 0 0 0 12px rgba(218, 24, 132, 0); } }
.aac-bigmic { width: 76px; height: 76px; border-radius: 50%; background: var(--magenta); color: #fff; border: 0; display: grid; place-items: center; flex: none; cursor: pointer; }
.aac-dock .aac-bigmic { width: 60px; height: 60px; }
.aac-bigmic svg { width: 30px; height: 30px; }
.aac-bigmic.off { background: #fff; color: #c0392b; border: 2px solid #c0392b; }
.aac-miclabel { font-size: 0.9rem; font-weight: 700; }
.aac-chip { border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--ink); align-self: flex-start; justify-self: start; cursor: pointer; }

/* Andrea's screens */
.aac-counts { display: flex; gap: 8px; }
.aac-counts div { flex: 1; border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 14px; padding: 8px 12px; }
.aac-counts b { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.aac-counts span { font-size: 0.75rem; color: var(--muted); }
/* Andrea's screen is one page (Brad, 2026-10-25): a heading and a count per section. */
.aac-sec { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.aac-sech { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.aac-sech h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.aac-secr { margin-left: auto; }
.aac-flag { font-size: 0.95rem; line-height: 1.2; min-height: 1.2em; }
.aac-secn { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; color: var(--muted); background: #f3f1f2; border-radius: 99px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.aac-secn.alert { background: var(--magenta); color: #fff; }
.aac-req { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--blush); border: 0; font: inherit; color: inherit; text-align: left; width: 100%; }
button.aac-req { background: #faf7f8; cursor: pointer; }
.aac-who { flex: 1; min-width: 0; display: grid; font-size: 0.8rem; line-height: 1.25; color: var(--muted); }
.aac-who b { color: var(--ink); font-size: 0.92rem; }
.aac-card { border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 18px; padding: 12px; display: grid; gap: 10px; }
.aac-band { margin: -12px -12px 2px; padding: 11px 12px; border-radius: 18px 18px 0 0; background: var(--magenta); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
/* Her countdown on Get ready: the members' ring (.cd-* in events.css) on its blush. */
.aac-cd { display: grid; justify-items: center; gap: 8px; text-align: center; background: var(--blush); border-radius: 14px; padding: 14px 12px; }
.aac-cd .cd-digits small[hidden] { display: none; }
.aac-cd.now .cd-big { font-size: 2rem; }
.aac-cd.now .cd-ring { animation: cd-pulse 1.6s ease-in-out infinite; }
.aac-check { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.aac-lvl { --lv: 0; display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.aac-lvl i { width: 5px; border-radius: 2px; background: var(--magenta); height: calc(4px + var(--lv) * 18px); transition: height 0.12s; }
.aac-lvl i:nth-child(2) { height: calc(4px + var(--lv) * 14px); }
.aac-lvl i:nth-child(4) { height: calc(4px + var(--lv) * 12px); }
.aac-lvl i:nth-child(5) { height: calc(4px + var(--lv) * 8px); }
.aac-qs { display: grid; gap: 8px; }
.aac-q { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: #faf7f8; }
.aac-q.done { opacity: 0.5; }
.aac-qt { flex: 1; min-width: 0; }
.aac-qt p { margin: 0 0 2px; font-size: 0.92rem; }
.aac-ssheet { display: grid; gap: 8px; padding: 2px 0 4px; }
.aac-sline { display: flex; justify-content: space-between; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.aac-tbar { height: 8px; border-radius: 99px; background: rgba(218, 24, 132, 0.15); overflow: hidden; }
.aac-tbar i { display: block; height: 100%; width: 0; background: var(--magenta); border-radius: 99px; }

.aac-ended { margin: auto 0; display: grid; justify-items: center; gap: 16px; text-align: center; padding: 20px 8px; }
.aac-ended .aac-btn { flex: none; min-width: 180px; }

.aac-taphear { position: absolute; left: 16px; right: 16px; bottom: calc(90px + env(safe-area-inset-bottom, 0)); border: 0; border-radius: 99px; padding: 16px; background: var(--ink); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }

/* reactions */
.aac-float { position: fixed; font-size: 1.6rem; pointer-events: none; z-index: 1150; animation: aac-rise 2.8s ease-in forwards; }
@keyframes aac-rise { 0% { transform: translateY(0) scale(0.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-220px) scale(1.15); opacity: 0; } }

.aac-toast { position: fixed; left: 50%; top: calc(70px + env(safe-area-inset-top, 0)); transform: translateX(-50%); z-index: 1160; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 99px; font-size: 0.9rem; font-weight: 700; max-width: calc(100% - 32px); text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: opacity 0.4s; }
.aac-toast.out { opacity: 0; }

/* ---------- Browsing during the call (screen 4) ---------- */
.aac-frame { position: absolute; left: 0; right: 0; top: 0; bottom: calc(76px + env(safe-area-inset-bottom, 0)); width: 100%; height: calc(100% - 76px - env(safe-area-inset-bottom, 0)); border: 0; background: var(--paper, #fff); display: none; }
.aac[data-view="mini"] .aac-frame { display: block; }
.aac[data-view="mini"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(76px + env(safe-area-inset-bottom, 0)); background: var(--paper, #fff); border-top: 1px solid rgba(0, 0, 0, 0.06); pointer-events: auto; }
.aac-mini { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0)); height: 60px; border-radius: 18px; background: #1b1719; color: #fff; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.aac-mini[hidden] { display: none; }
.aac-mini-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 6px; cursor: pointer; }
.aac-mini-face .aac-face { width: 40px; height: 40px; font-size: 0.95rem; }
.aac-mini-face .aac-face.talk::after { inset: -4px; border-width: 2px; }
.aac-mini-meta { min-width: 0; display: grid; font-size: 0.75rem; line-height: 1.3; }
.aac-mini-meta b { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aac-mini-sub { opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aac-mb { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; font-size: 1rem; flex: none; cursor: pointer; }
.aac-mb svg { width: 18px; height: 18px; }
.aac-mb.on { background: var(--magenta); }
.aac-mb.off { color: #ff8a8a; }

@media (prefers-reduced-motion: reduce) {
  .aac-face.talk::after, .blink, .aac-bigmic.nudge, .aac-mb.nudge, .aac-cd.now .cd-ring { animation: none; }
  .aac-float { display: none; }
}
@media (min-width: 700px) {
  .aac-body { width: 100%; max-width: 560px; margin: 0 auto; }
  .aac-stage { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- The recording editor (call-editor.js, screen 10) ---------- */
.ced { position: fixed; inset: 0; z-index: 1100; background: var(--paper, #fff); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); font-family: var(--font-body); color: var(--ink); }
.ced-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.ced-title { flex: 1; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.ced-undo { border: 0; background: none; font: inherit; font-weight: 700; color: var(--magenta); padding: 10px 6px; min-width: 44px; }
.ced-undo:disabled { color: #bbb; }
.ced-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 760px; margin: 0 auto; }
.ced-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.ced-sum { margin: -4px 0 0; font-size: 0.85rem; color: var(--muted); }
.ced-sum b { color: var(--ink); }
.ced-wave { position: relative; height: 104px; border-radius: 14px; background: #faf6f8; border: 1px solid rgba(0, 0, 0, 0.08); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.ced-wave canvas { position: absolute; inset: 0; }
.ced-trim { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(60, 40, 50, 0.2) 0 4px, rgba(60, 40, 50, 0.08) 4px 8px); pointer-events: none; }
.ced-trim.ced-l { left: 0; border-right: 4px solid var(--ink); }
.ced-trim.ced-r { border-left: 4px solid var(--ink); }
.ced-cuts { position: absolute; inset: 0; }
.ced-cut { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(192, 57, 43, 0.3) 0 4px, rgba(192, 57, 43, 0.12) 4px 8px); border-left: 2px solid #c0392b; border-right: 2px solid #c0392b; }
.ced-sel { position: absolute; top: 0; bottom: 0; background: rgba(218, 24, 132, 0.18); border-left: 2px solid var(--magenta); border-right: 2px solid var(--magenta); pointer-events: none; }
.ced-ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--magenta); pointer-events: none; }
.ced-ph::before { content: ""; position: absolute; top: -1px; left: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--magenta); }
.ced-ruler { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -4px; }
.ced-marks { position: relative; height: 40px; }
.ced-mark { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 1px; border: 0; background: none; padding: 0; font: inherit; font-size: 0.66rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ced-mark .aac-face.sm { width: 22px; height: 22px; font-size: 0.6rem; }
.ced-zoom { display: flex; gap: 6px; flex-wrap: wrap; }
.ced-selpill[hidden] { display: none; }
.ced-ctl { display: flex; gap: 8px; }
.ced-links { display: flex; justify-content: center; }
.ced-links button { border: 0; background: none; font: inherit; font-weight: 700; font-size: 0.9rem; color: var(--magenta); padding: 8px; }
.ced-busy { position: fixed; inset: 0; z-index: 1150; display: grid; place-items: center; background: rgba(255, 255, 255, 0.85); font-weight: 700; font-size: 1.05rem; }
.ced-body > .aac-btn, .ced-ctl .aac-btn { flex: none; }
.ced-ctl .aac-btn { flex: 1; }

/* ---------- Photos (Brad, 2026-10-25) ---------- */
/* A member's two tabs: Attendees and Photos. */
/* A member's photos (2026-10-31): Andrea's set as squares under the faces,
   cropped to fill (decoration); a tap opens the whole photo. */
/* Everything a member needs on one screen (2026-11-01): the photos give up
   height first, their squares turning into shorter strips, so the faces, the
   question bar and the buttons fit without scrolling, an iPhone SE included.
   At about 50px a row they stop shrinking and the page scrolls under the
   pinned buttons. --rows is set by call.js (3 for 7 to 9 photos). */
.aac-mphotos { display: flex; flex-direction: column; gap: 6px; flex: 0 1 auto; min-height: calc(var(--rows, 3) * 56px + 20px); }
.aac-mphotos .aac-pgrid { flex: 1 1 auto; min-height: 0; aspect-ratio: 3 / var(--rows, 3); grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr)); gap: 6px; }
.aac-mphotos .aac-ptile { aspect-ratio: auto; }
.aac-plabel { margin: 0; font-size: 0.82rem; color: var(--muted); text-align: center; }
.aac-ptile.cover { background: #f3eff1 center / cover no-repeat; }
.aac-ptile.cover img { object-fit: cover; }

/* The open photo, full screen over the room. */
.aac-big { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: #0d0a0c; color: #fff;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
.aac-big[hidden], .aac[data-view="mini"] .aac-big { display: none; }
.aac-bigbar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; }
.aac-bigcount { font-size: 0.85rem; font-weight: 700; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }
.aac-bigpill { font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--magenta); color: #fff; }
.aac-bigx { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aac-bigx svg { width: 22px; height: 22px; }
.aac-bigimg { flex: 1; min-height: 0; position: relative; background: center / contain no-repeat; }
.aac-bigimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.aac-bignav { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aac-bignav svg { width: 22px; height: 22px; }
.aac-bignav.big-prev { left: 8px; }
.aac-bignav.big-next { right: 8px; }
.aac-bighint { margin: 0; padding: 10px 16px 14px; text-align: center; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }
@media (min-width: 700px), (orientation: landscape) { .aac-bighint { display: none; } }
@media (orientation: landscape) and (max-height: 540px) { .aac-bigbar { position: absolute; top: 0; right: 0; z-index: 1; padding: 6px; } .aac-bigcount, .aac-bigpill { display: none; } }

/* Andrea's grid: the one on screen outlined, the ones shown faded and ticked. */
.aac-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* Square tiles showing the whole photo, as members will see it (a screenshot
   blank in the middle looked like an empty tile, Brad, 2026-10-25); the soft
   grey shows the edges of a white photo. */
.aac-ptile { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #e9e2e6; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aac-ptile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.aac-ptile.seen img { opacity: 0.45; filter: saturate(0.6); }
.aac-ptile.on { box-shadow: 0 0 0 3px var(--magenta); }
.aac-ptile.sending { animation: aac-sending 0.9s ease-in-out infinite; }
@keyframes aac-sending { 50% { opacity: 0.55; } }
.aac-pnum { position: absolute; left: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 22px; text-align: center; }
.aac-pon { position: absolute; left: 6px; right: 6px; bottom: 6px; border-radius: 99px; background: var(--magenta); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 3px 6px; text-align: center; }
.aac-pseen { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--magenta); color: #fff; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; }