/* ═══ Reminisce — memory-care picker ═══════════════════════════════════
   S630. Extracted from the <style> block that lived inside reminisce.html.
   That file was deleted from the repo at 0f9488f and survived on the server
   only because the deploy rsyncs without --delete; it is restored to git
   alongside this sheet. Rules below the divider are new for D-S630-10
   (family and friends first, everyone else collapsible) and for the 12
   inline style= attributes the old page carried. */
.rem-page { min-height:auto; background:var(--color-bg); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:40px 20px 60px; gap:32px; }
.rem-title { color:var(--color-text); font-size:2rem; font-weight:700; letter-spacing:-.02em; text-align:center; opacity:.9; }
.rem-subtitle { color:var(--color-text-dim); font-size:1rem; text-align:center; max-width:440px; line-height:1.55; margin-top:-16px; }
.rem-card { background:var(--color-surface); border:1px solid var(--brand-border); border-radius:14px; padding:28px 32px; width:100%; max-width:480px; display:flex; flex-direction:column; gap:20px; }
.rem-row-label { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-dim); margin-bottom:8px; }
.rem-chips { display:flex; flex-wrap:wrap; gap:8px; }
.rem-chip { background:transparent; border:1px solid var(--brand-border); color:var(--color-text-dim); border-radius:20px; padding:6px 14px; font-size:.85rem; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.rem-chip.active,
.rem-chip:hover { background:var(--color-accent-c); border-color:var(--color-accent-c); color:#fff; }
.rem-person-wrap { position:relative; margin-top:8px; }
/* S637, C ruling: the picker is an INLINE AVATAR GRID on every surface, matching
   the TAP view. It was an absolutely positioned dropdown, which floated over the
   Decade, Location and Speed rows and hid them while open. Faces are easier to
   find than a column of names, and nothing gets covered. */
.rem-person-drop { display:none; margin-top:8px; background:var(--color-surface); border:1px solid var(--brand-border-strong); border-radius:10px; padding:8px; }
.rem-person-drop.open { display:block; }
.rem-person-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:4px; }
.rem-person-opt { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; cursor:pointer; color:var(--color-text); font-size:.75rem; text-align:center; border-radius:10px; transition:background .12s; }
.rem-person-opt > span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rem-person-opt:hover,
.rem-person-opt.active { background:rgba(0,170,255,.12); }
.rem-av { width:46px; height:46px; border-radius:50%; background:var(--color-accent-c); color:#fff; font-size:.95rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.rem-av img { width:100%; height:100%; object-fit:cover; }
.rem-decade-row { display:flex; flex-wrap:wrap; gap:6px; }
.rem-decade-btn { background:transparent; border:1px solid var(--brand-border); color:var(--color-text-dim); border-radius:16px; padding:4px 11px; font-size:.8rem; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.rem-decade-btn.active,
.rem-decade-btn:hover { background:rgba(0,170,255,.15); border-color:var(--color-accent-c); color:var(--color-text); }
.rem-location-input { width:100%; background:transparent; border:1px solid var(--brand-border); border-radius:8px; color:var(--color-text); padding:8px 12px; font-size:.9rem; outline:none; transition:border-color .15s; }
.rem-location-input:focus { border-color:var(--color-accent-c); }

/* S637 — location picker, speed, shared-panel bits */
.rem-row-note { font-weight:400; text-transform:none; font-size:.75rem; color:var(--color-text-dim); }
.rem-loc-wrap { position:relative; }
.rem-loc-drop { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--color-surface); border:1px solid var(--brand-border-strong); border-radius:10px; max-height:240px; overflow-y:auto; z-index:200; display:none; }
.rem-loc-drop.open { display:block; }
.rem-loc-opt { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; cursor:pointer; color:var(--color-text); font-size:.88rem; transition:background .12s; }
.rem-loc-opt:hover, .rem-loc-opt--on { background:rgba(0,170,255,.12); }
.rem-loc-count { font-size:.75rem; color:var(--color-text-dim); font-variant-numeric:tabular-nums; }
.rem-loc-clear { display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--brand-border-strong); padding:10px 14px; font-family:var(--font-body); font-size:.85rem; color:var(--color-text-dim); cursor:pointer; }
.rem-loc-clear:hover { background:var(--color-surface2); color:var(--color-text); }
.rem-speed { width:100%; accent-color:var(--color-accent-c); }
.rem-location-input::placeholder { color:var(--color-text-dim); }
.rem-play-btn { background:var(--color-accent-c); color:#fff; border:none; border-radius:10px; padding:14px 28px; font-size:1rem; font-weight:700; cursor:pointer; width:100%; transition:opacity .15s, transform .1s; }
.rem-play-btn:hover { opacity:.88; transform:translateY(-1px); }
.rem-play-btn:active { transform:translateY(0); }
.rem-empty { color:var(--color-text-dim); text-align:center; font-size:.9rem; padding:40px 20px; }
.rem-loading { color:var(--color-text-dim); text-align:center; font-size:.9rem; padding:20px; }

/* ── S630 additions ─────────────────────────────────────────────────── */
.rem-hidden { display:none; }
.rem-community-wrap { width:100%; max-width:480px; }
.rem-label-gap { margin-bottom:12px; }
.rem-stack { display:flex; flex-direction:column; gap:10px; }
.rem-stack--tight { display:flex; flex-direction:column; gap:8px; }
.rem-items-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.rem-items-back { background:transparent; border:1px solid var(--color-border); color:var(--color-text-dim); border-radius:16px; padding:4px 12px; font-size:12px; cursor:pointer; }
.rem-items-title { font-size:13px; font-weight:700; color:var(--color-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rem-items-drawer { margin-top:4px; }
.rem-figures-section { margin-top:20px; padding-top:20px; border-top:1px solid var(--color-border); }
/* Person picker: Family, then Friends, then everyone else behind a toggle. */
/* S637: this rule capped the drop at 300px. That was fine while the picker was an
   absolutely positioned list with overflow-y:auto. As an inline grid the cap makes
   the tiles spill out and paint over the What, Decade, Location and Play rows
   below. The grid grows with its content, exactly as the TAP view does. */
.rem-person-drop { max-height:none; }
.rem-person-filter { width:100%; box-sizing:border-box; background:var(--color-surface2); border:none; border-bottom:1px solid var(--color-border); color:var(--color-text); padding:10px 14px; font-size:.88rem; outline:none; position:sticky; top:0; z-index:1; }
.rem-person-filter::placeholder { color:var(--color-text-dim); }
.rem-person-group { font-size:.65rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--color-text-dim); padding:10px 14px 6px; }
.rem-person-more { width:100%; background:transparent; border:none; border-top:1px solid var(--color-border); color:var(--color-accent-c); font-size:.82rem; font-weight:700; padding:10px 14px; cursor:pointer; text-align:left; }
.rem-person-more:hover { background:rgba(0,170,255,.08); }
.rem-person-none { color:var(--color-text-dim); font-size:.85rem; padding:14px; text-align:center; }

/* S637 — clearing a chosen person */
.rem-person-clear { display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--brand-border-strong); padding:10px 14px; font-family:var(--font-body); font-size:.85rem; color:var(--color-text-dim); cursor:pointer; }
.rem-person-clear:hover { background:var(--color-surface2); color:var(--color-text); }
.rem-person-opt--on { background:var(--color-surface2); font-weight:600; }