/* © 2026 WiredType. Proprietary and confidential. Not licensed for copying or reuse. Terms: https://wiredtype.com/terms */
/* ============================================================
   /together, the hub. Proposed by the Together design lane, 2026-09-22.
   Built on the Midnight Warm tokens in styles.css, the viewer's type accent from theme-type.css (the Switch),
   and the shell dimensions in shell.css (--wt-top-height, --wt-bottom-height). The header is never hidden.

   Direction: the Switchboard (D14), with the Room's map inside each room.
   Sections:
     1. Tokens for this page
     2. Shared: page, top, search and filters, badges, Switchboard rows, states, actions,
        invitations out, empty state, quick view, loading
     3. ROOMS (D14, D15): the rail, the room sheet, the insight card with the room's map, selection, New arrivals, follow-up help
     4. Reduced motion
     5. ADD PEOPLE (/together/add, phase 1)
     6. SETTINGS (/together/settings and the account page card, phase 0)

   Motion: ease-out, 130 to 180 ms, no overshoot.
   Phone layout below 768 px, where global-nav shows its bottom bar.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
/* The household dialog also opens on the account page, outside .tg-page, so it carries the tokens itself (WT_MemberBuild_03). */
.tg-page, .tg-hh-dialog {
  --tg-me: var(--wt-accent, var(--accent));               /* the viewer's type color */
  --tg-on-me: var(--on-accent, #1A1520);                   /* text on a type fill */
  --tg-on-type: #1A1520;
  --tg-gray: #6E6570;
  --tg-line: var(--border, rgba(255,255,255,.06));
  --tg-line-2: var(--border-hover, rgba(255,255,255,.14));
  --tg-surface: var(--bg-2, #221C26);
  --tg-raise: var(--shadow-lg);
  --tg-scrim: rgba(10,7,12,.62);
  --tg-ease: cubic-bezier(.2,.7,.3,1);
  --tg-fast: 130ms;
  --tg-base: 160ms;
  --tg-gutter: 40px;
}
[data-theme="light"] .tg-page, [data-theme="light"] .tg-hh-dialog {
  --tg-gray: #9A9096;
  --tg-scrim: rgba(40,30,30,.35);
}

/* ---------- 2. Shared ---------- */
.tg-page { background: var(--bg-0); color: var(--text); }
.tg { max-width: 1180px; margin: 0 auto; padding: 32px var(--tg-gutter) 80px; font-family: var(--font-body); }
.tg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tg [hidden], .tg-qv[hidden], .tg-qv-scrim[hidden] { display: none !important; }
.tg :focus-visible, .tg-qv :focus-visible { outline: 2px solid var(--tg-me); outline-offset: 2px; }
/* styles.css gives every section 120 px of padding and headings extra word spacing; this page sets its own. */
:where(.tg, .tg-qv) section { padding: 0; }   /* zero specificity, so every class rule below still sets its own padding */
.tg h1, .tg h2, .tg h3, .tg-qv h2, .tg-qv h3 { word-spacing: normal; }
.tg svg, .tg-qv svg, .tg-room-sheet svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The top */
.tg-top { margin-bottom: 28px; }
.tg-title { font: 800 44px/1 var(--font-heading); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.tg-line { color: var(--text-secondary); font-size: 15px; margin: 8px 0 0; max-width: 52ch; }
.tg-top__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.tg-add {
  display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap;
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm);
  background: var(--tg-me); color: var(--tg-on-me); font: 700 15px var(--font-heading); text-decoration: none;
  transition: filter var(--tg-fast) var(--tg-ease);
}
.tg-add:hover { filter: brightness(1.08); }
.tg-add svg { width: 16px; height: 16px; stroke-width: 2.4; }
/* D30 (card lane, #100): My card beside Add people on a phone, drawn as the quieter of the two; the rail carries the tab
   on a laptop, so the button hides from 768px. */
.tg-add--card { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--tg-line-2); }
@media (min-width: 768px) { .tg-add--card { display: none; } }
/* A contact row's Invite, opened in place (add lane): the person's own email first, then I sent it, then WiredType sends it. */
.tg-invite-inline { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-start; margin-top: 8px; }
.tg-invite-inline p { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--text-secondary); }
/* A contact already on WiredType (#100): its longer status line wraps under the dot on a phone. */
.tg-row[data-on-wiredtype] .tg-status { white-space: normal; align-items: flex-start; }
.tg-row[data-on-wiredtype] .tg-status::before { margin-top: 0.45em; }
/* The share moment on a contact row already on WiredType (#100): the question, its line, then two buttons of equal size. */
.tg-share-inline .tg-share-inline__title { font-size: 15px; font-weight: 600; color: var(--text); }
.tg-share-inline__buttons { flex-basis: 100%; max-width: 440px; display: flex; gap: 8px; }
.tg-share-inline__buttons .tg-act { flex: 1 1 0; min-width: 0; white-space: normal; }
.tg-count { margin: 0; font: 500 14px var(--font-body); color: var(--text-secondary); }
.tg-count [data-count] { color: var(--text); font-weight: 600; }

/* Search and filters */
.tg-find { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.tg-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 360px; height: 44px; padding: 0 12px;
  border: 1px solid var(--tg-line-2); border-radius: var(--radius-sm); background: var(--bg-1); color: var(--text-muted);
}
.tg-search svg { width: 16px; height: 16px; flex: none; }
.tg-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; outline: 0; }
.tg-search input::placeholder { color: var(--text-muted); }
.tg-search:focus-within { border-color: var(--tg-me); }
.tg-chips { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tg-chips::-webkit-scrollbar { display: none; }
.tg-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px;
  border: 1px solid var(--tg-line-2); border-radius: var(--radius-pill); background: transparent;
  color: var(--text-secondary); font: 500 13px var(--font-body); cursor: pointer;
  transition: background var(--tg-fast) var(--tg-ease), color var(--tg-fast) var(--tg-ease);
}
.tg-chip [data-filter-count] { font: 500 11px var(--font-mono); color: var(--text-muted); }
.tg-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg-0); }
.tg-chip[aria-pressed="true"] [data-filter-count] { color: var(--bg-0); opacity: .7; }
.tg-chip--menu::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.tg-chip--menu[aria-expanded="true"] { border-color: var(--text); color: var(--text); }
.tg-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 200px; max-height: 320px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-md); background: var(--tg-surface); box-shadow: var(--tg-raise);
}
.tg-menu [role="option"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.tg-menu [role="option"]:hover, .tg-menu [aria-selected="true"] { background: var(--bg-card-hover); }

/* Badges: the site's type tiles. A blend prints both colors, split on the diagonal. list.js sets data-primary and data-secondary. */
.tg-badge {
  position: relative; z-index: 1;
  --c1: var(--tg-gray); --c2: var(--c1);
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%);
  color: var(--tg-on-type); font: 700 14px/1 var(--font-heading); letter-spacing: -.02em;
  transition: transform var(--tg-fast) var(--tg-ease), box-shadow var(--tg-fast) var(--tg-ease);
}
button.tg-badge { cursor: pointer; }
button.tg-badge:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1) 35%, transparent); }
.tg-badge[data-primary="D"] { --c1: var(--disc-d); }
.tg-badge[data-primary="I"] { --c1: var(--disc-i); }
.tg-badge[data-primary="S"] { --c1: var(--disc-s); }
.tg-badge[data-primary="C"] { --c1: var(--disc-c); }
.tg-badge[data-secondary="D"] { --c2: var(--disc-d); }
.tg-badge[data-secondary="I"] { --c2: var(--disc-i); }
.tg-badge[data-secondary="S"] { --c2: var(--disc-s); }
.tg-badge[data-secondary="C"] { --c2: var(--disc-c); }
.tg-badge--none { background: transparent; border: 1.5px dashed var(--tg-gray); }
.tg-badge--lg { width: 56px; height: 56px; border-radius: 14px; font-size: 19px; }

/* The Switchboard (D14): one line from you to each person. rooms.js narrows it; list.js renders the rows.
   On a laptop a row is one line: the line itself, badge, who, room chips, status, actions. */
.tg-lines { position: relative; list-style: none; margin: 0; padding: 0; }
.tg-lines::before { content: ""; position: absolute; left: 19px; top: -14px; bottom: 30px; width: 2px; border-radius: 2px; background: linear-gradient(var(--tg-me), color-mix(in srgb, var(--tg-me) 25%, var(--tg-line-2)) 40%, var(--tg-line-2)); }
.tg-row {
  position: relative; display: grid; grid-template-columns: 62px 40px minmax(170px, 1.2fr) minmax(110px, .9fr) 140px minmax(0, auto);
  align-items: center; gap: 0 14px; min-height: 64px; padding: 4px 0;
}
.tg-row::after { content: ""; position: absolute; left: 78px; right: 0; bottom: 0; height: 1px; background: var(--tg-line); }
.tg-who { min-width: 0; display: flex; flex-direction: column; }
.tg-name { font: 600 16px/1.25 var(--font-heading); letter-spacing: -.01em; color: var(--text); }
.tg-meta { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 139: the line a person left for the owner when they exchanged details; it wraps and is never cut. */
.tg-row__note { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }
.tg-row[data-arrival] .tg-meta { white-space: normal; }
/* The line and its junction encode the state (CONTRACT 4.1); the printed label stays on every row. */
.tg-wire { position: absolute; left: 20px; top: 33px; width: 24px; height: 2px; margin-top: -1px; }
.tg-jn { position: absolute; left: 14px; top: 33px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--bg-0); border: 2px solid var(--tg-line-2); }
.tg-row[data-state="connected"] .tg-wire { background: var(--c1, var(--tg-me)); }
.tg-row[data-state="connected"] .tg-jn { background: var(--c1, var(--tg-me)); border-color: var(--c1, var(--tg-me)); }
.tg-row[data-state="waiting_on_me"] .tg-wire { background: repeating-linear-gradient(90deg, var(--tg-me) 0 6px, transparent 6px 10px); }
.tg-row[data-state="waiting_on_me"] .tg-jn { background: var(--tg-me); border-color: var(--tg-me); animation: tg-pulse 1.8s ease-out infinite; }
@keyframes tg-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tg-me) 50%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.tg-row[data-state="waiting_on_them"] .tg-wire { background: repeating-linear-gradient(90deg, var(--text-muted) 0 6px, transparent 6px 10px); }
.tg-row[data-state="invited"] .tg-wire, .tg-row[data-state="queued"] .tg-wire { background: repeating-linear-gradient(90deg, var(--text-muted) 0 2px, transparent 2px 6px); }
.tg-row[data-state="not_invited"] .tg-wire { display: none; }
.tg-row[data-state="declined"] .tg-wire, .tg-row[data-state="ended"] .tg-wire { background: linear-gradient(90deg, var(--tg-gray) 0 14px, transparent 14px 24px, var(--tg-gray) 24px 30px, transparent 30px); }
.tg-row[data-state="paused"] .tg-wire { width: 26px; background: repeating-linear-gradient(90deg, var(--disc-i) 0 2px, transparent 2px 6px); }
.tg-row[data-arrival] .tg-jn { border-style: dashed; }
/* list.js sets data-primary on the row too, so the line takes the person's primary color. */
.tg-row[data-primary="D"] { --c1: var(--disc-d); } .tg-row[data-primary="I"] { --c1: var(--disc-i); }
.tg-row[data-primary="S"] { --c1: var(--disc-s); } .tg-row[data-primary="C"] { --c1: var(--disc-c); }
/* Room chips: the rooms a person is in, except the room being viewed. An arrival shown in Everyone carries the card chip. */
.tg-chips-rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.tg-room-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--tg-line); border-radius: 6px; background: var(--bg-card); font: 500 11px/1 var(--font-mono); letter-spacing: .03em; color: var(--text-secondary); }
.tg-room-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .7; }
.tg-room-chip--card { border-style: dashed; color: var(--text-muted); }
.tg-room-chip--new { border-color: color-mix(in srgb, var(--tg-me) 50%, transparent); color: var(--tg-me); }
.tg-jack { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; }
.tg-jack small { font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--text-muted); }
.tg-jack small b { color: var(--text); font-weight: 600; }

/* The status, one per derived state in CONTRACT 4.1 (list.js sets data-state on the row) */
.tg-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.tg-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tg-gray); }
.tg-status--inline { display: none; margin-top: 2px; }
.tg-row[data-state="connected"] .tg-status { color: var(--text); }
.tg-row[data-state="connected"] .tg-status::before { background: var(--tg-me); }
.tg-row[data-state="waiting_on_me"] .tg-status { color: var(--tg-me); font-weight: 600; }
.tg-row[data-state="waiting_on_me"] .tg-status::before { background: var(--tg-me); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-me) 30%, transparent); }
.tg-row[data-state="waiting_on_them"] .tg-status::before { background: transparent; border: 1.5px solid var(--text-muted); }
.tg-row[data-state="invited"] .tg-status::before,
.tg-row[data-state="queued"] .tg-status::before { background: transparent; border: 1.5px dotted var(--text-muted); }
.tg-row[data-state="declined"] .tg-status,
.tg-row[data-state="ended"] .tg-status { color: var(--text-muted); }
.tg-row[data-state="paused"] .tg-status { color: var(--disc-i); }
.tg-row[data-state="paused"] .tg-status::before { background: var(--disc-i); }

/* Actions */
.tg-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.tg-act {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-secondary);
  font: 500 13px var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--tg-fast) var(--tg-ease), color var(--tg-fast) var(--tg-ease);
}
.tg-act:hover { background: var(--bg-card-hover); color: var(--text); }
.tg-act--primary { border-color: var(--tg-line-2); color: var(--text); font-weight: 600; }
.tg-act--solid { background: var(--text); border-color: var(--text); color: var(--bg-0); font-weight: 600; }
.tg-act--solid:hover { background: var(--text); color: var(--bg-0); filter: brightness(1.1); }
.tg-act--icon { width: 44px; padding: 0; }
.tg-act--icon svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.tg-group--attention .tg-act--primary { background: var(--tg-me); border-color: var(--tg-me); color: var(--tg-on-me); }

.tg-note { margin: 18px 0 0; font-size: 14px; color: var(--text-secondary); }
.tg-note--error { color: var(--error-light, #fca5a5); }
.tg-more { display: block; margin: 18px 0 0; min-height: 44px; padding: 0 18px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-sm); background: transparent; color: var(--text); font: 600 14px var(--font-body); cursor: pointer; }

/* Loading */
.tg-row--ghost { grid-template-columns: 40px 1fr; }
.tg-ghost-line { height: 12px; width: 40%; border-radius: 6px; background: var(--bg-3); }
.tg[data-state="ready"] [data-together-loading] { display: none; }

/* Invitations out, collapsed under the list */
.tg-inv { margin-top: 26px; border-top: 1px solid var(--tg-line); }
.tg-inv summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: pointer; font: 600 15px var(--font-heading); }
.tg-inv summary::-webkit-details-marker { display: none; }
.tg-inv summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--text-secondary); border-bottom: 1.5px solid var(--text-secondary); transform: rotate(-45deg); transition: transform var(--tg-base) var(--tg-ease); }
.tg-inv[open] summary::before { transform: rotate(45deg); }
.tg-inv__n { font: 500 12px var(--font-mono); color: var(--text-muted); }
.tg-inv summary small { margin-left: auto; font: 400 13px var(--font-body); color: var(--text-muted); }
.tg-inv__rows { list-style: none; margin: 0; padding: 0; }
.tg-inv__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 0 12px 17px; border-top: 1px dashed var(--tg-line); }
.tg-inv__row .tg-name { font-size: 15px; min-width: 130px; }
.tg-inv__when { flex: 1 1 220px; margin: 0; font-size: 13px; color: var(--text-secondary); }

/* Empty state: the three doors */
.tg-empty__title { font: 700 22px/1.25 var(--font-heading); letter-spacing: -.015em; margin: 0; max-width: 34ch; text-wrap: balance; }
.tg-empty__line { color: var(--text-secondary); font-size: 15px; margin: 8px 0 0; max-width: 60ch; }
.tg-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.tg-door {
  display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-lg);
  background: var(--bg-card); color: var(--text); text-decoration: none;
  transition: border-color var(--tg-base) var(--tg-ease), transform var(--tg-base) var(--tg-ease);
}
.tg-door:hover { border-color: var(--tg-me); transform: translateY(-1px); }
.tg-door svg { width: 30px; height: 30px; color: var(--tg-me); stroke-width: 1.8; margin-bottom: 6px; }
.tg-door b { font: 700 18px/1.2 var(--font-heading); }
.tg-door span { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.tg-door small { margin-top: 6px; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.tg-door--live small { color: var(--tg-me); }
.tg-door[aria-disabled="true"] { cursor: default; }
.tg-door[aria-disabled="true"]:hover { border-color: var(--tg-line-2); transform: none; }
.tg-sample { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 16px 18px; border: 1px dashed var(--tg-line-2); border-radius: var(--radius-lg); color: var(--text); text-decoration: none; }
.tg-sample__pair { display: flex; flex: none; }
.tg-sample__pair .tg-badge { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; box-shadow: 0 0 0 3px var(--bg-0); }
.tg-sample__pair .tg-badge + .tg-badge { margin-left: -8px; }
.tg-sample__text { display: flex; flex-direction: column; font-size: 14px; color: var(--text-secondary); }
.tg-sample__text b { font: 600 15px var(--font-heading); color: var(--text); }

/* The quick view. Laptop: a popover beside the badge; quickview.js sets --qv-left, --qv-top and --qv-arrow (px, page coordinates). */
.tg-qv-scrim { position: fixed; inset: var(--wt-top-height, 64px) 0 0 0; z-index: 9000; background: var(--tg-scrim); opacity: 0; transition: opacity var(--tg-base) var(--tg-ease); }
.tg-qv {
  position: absolute; z-index: 9001; left: var(--qv-left, 0); top: var(--qv-top, 0); width: 380px; max-width: calc(100vw - 32px);
  padding: 20px 22px 22px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-md);
  background: var(--tg-surface); box-shadow: var(--tg-raise); color: var(--text);
  opacity: 0; transform: translateX(-4px); transition: opacity var(--tg-fast) var(--tg-ease), transform var(--tg-base) var(--tg-ease);
}
.tg-qv::before { content: ""; position: absolute; left: -7px; top: var(--qv-arrow, 28px); width: 12px; height: 12px; background: var(--tg-surface); border-left: 1px solid var(--tg-line-2); border-bottom: 1px solid var(--tg-line-2); transform: rotate(45deg); }
.tg-qv.is-open { opacity: 1; transform: none; }
.tg-qv__grab { display: none; }
.tg-qv__head { display: flex; align-items: center; gap: 14px; }
.tg-qv__names { min-width: 0; }
.tg-qv__name { font: 800 21px/1.1 var(--font-heading); letter-spacing: -.02em; margin: 0; }
.tg-qv__whose { margin: 2px 0 0; font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tg-qv__close { align-self: flex-start; display: grid; place-items: center; width: 44px; height: 44px; margin-left: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.tg-qv__close:hover { background: var(--bg-card-hover); color: var(--text); }
.tg-qv__close svg { width: 16px; height: 16px; }
.tg-qv__line { font: 600 17px/1.35 var(--font-heading); margin: 14px 0 4px; }
.tg-qv__cols { display: grid; gap: 14px; margin-top: 14px; }
.tg-qv h3 { font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; }
.tg-qv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.tg-qv li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.tg-qv li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 2px; background: var(--qv-color, var(--text-muted)); }
.tg-qv__approach li { color: var(--text); }
.tg-qv__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--tg-line); }
.tg-qv__typelink { font-size: 13.5px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.tg-qv__foot .tg-act--solid { margin-left: auto; }

/* Phone: the line narrows, actions sit under the name, the quick view becomes a bottom sheet above the tab bar */
@media (max-width: 767px) {
  .tg-page { --tg-gutter: 16px; }
  .tg-title { font-size: 34px; }
  /* Q111-TS2: the search box shrinks with the screen (a flex item keeps its content width unless min-width is 0). */
  .tg-search { max-width: 100%; min-width: 0; flex-basis: 100%; box-sizing: border-box; }
  .tg-lines::before { left: 13px; }
  .tg-row { grid-template-columns: 38px 40px minmax(0, 1fr); grid-template-areas: "r b w" "r . c" "r . a"; gap: 4px 12px; padding: 12px 0; }
  .tg-row::after { left: 50px; }
  .tg-row > .tg-badge, .tg-row > .tg-sel { grid-area: b; }
  .tg-row > .tg-who { grid-area: w; }
  .tg-row > .tg-chips-rooms { grid-area: c; }
  .tg-row > .tg-status { display: none; }
  .tg-row > .tg-acts { grid-area: a; justify-content: flex-start; margin-left: -11px; }
  .tg-wire { left: 14px; width: 24px; }
  .tg-jn { left: 8px; }
  .tg-status--inline { display: inline-flex; }
  .tg-doors { grid-template-columns: 1fr; gap: 12px; }
  .tg-inv summary small { display: none; }
  .tg-qv {
    position: fixed; left: 0; right: 0; top: auto; bottom: var(--wt-bottom-height, 0px); width: auto; max-width: none; max-height: 78dvh; overflow-y: auto;
    border-radius: 22px 22px 0 0; border-bottom: 0; padding-top: 10px; transform: translateY(100%); transition: transform 180ms var(--tg-ease), opacity var(--tg-fast) var(--tg-ease);
  }
  .tg-qv::before { display: none; }
  .tg-qv.is-open { transform: none; }
  .tg-qv__grab { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--tg-line-2); }
  .tg-qv-scrim.is-open { opacity: 1; }
}

@media (min-width: 768px) {
  .tg-qv-scrim { display: none !important; }   /* the laptop popover closes on an outside press, no scrim */
}

/* ---------- 3. ROOMS (D14, D15) ----------
   The Switchboard is the main view; rooms narrow it. Design artifact: https://claude.ai/artifact/9pXzRvJX5NxgrPFhx2oMWL
   rooms.js renders the rail (laptop) and the room sheet (phone) from the same list, sets data-room on .tg, fills the insight
   card and runs selection and Add to room. list.js renders the rows. card.js (the card sub-module) fills the follow-up panel.
   The Room's map now lives only in the insight card and the Everyone network strip: the blocks marked ROOM ONLY in the HTML. */
.tg { max-width: 1320px; padding-left: 0; padding-right: 0; }
.tg-sb { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100dvh - var(--wt-top-height, 64px)); }
.tg-sb__main { min-width: 0; padding: 26px var(--tg-gutter) 90px 34px; }

/* The rail */
.tg-rail { position: sticky; top: var(--wt-top-height, 64px); align-self: start; max-height: calc(100dvh - var(--wt-top-height, 64px)); overflow-y: auto; padding: 20px 14px 30px var(--tg-gutter); border-right: 1px solid var(--tg-line); }
.tg-rail__h { margin: 0 0 8px 10px; font: 700 11.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); word-spacing: normal; }
.tg-rooms { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 2px; }
.tg-room-item {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; width: 100%; min-height: 44px;
  padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--tg-fast) var(--tg-ease);
}
.tg-room-item:hover { background: var(--bg-card-hover); }
.tg-room-item[aria-current="page"] { background: var(--bg-3); }
.tg-room-item[aria-current="page"] .tg-room-item__name { font-weight: 700; }
.tg-room-item svg { width: 18px; height: 18px; color: var(--text-secondary); }
.tg-room-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14.5px/1.2 var(--font-heading); }
.tg-room-item__count { font: 500 12px var(--font-mono); color: var(--text-muted); }
.tg-room-item__badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--tg-me); color: var(--tg-on-me); font: 700 11px/20px var(--font-mono); text-align: center; }
/* The type-mix bar: one flex segment per primary style among shared results, gray for the rest. rooms.js sets flex-grow inline. */
.tg-mix { grid-column: 2 / 4; display: flex; gap: 2px; height: 4px; overflow: hidden; border-radius: 4px; }
.tg-mix i { display: block; height: 100%; }
.tg-mix [data-seg="D"] { background: var(--disc-d); } .tg-mix [data-seg="I"] { background: var(--disc-i); }
.tg-mix [data-seg="S"] { background: var(--disc-s); } .tg-mix [data-seg="C"] { background: var(--disc-c); }
.tg-mix [data-seg="x"] { background: var(--tg-gray); opacity: .5; }
.tg-room-item--make .tg-room-item__name { font-weight: 500; color: var(--text-secondary); }
/* D30: My card heads the rail and the phone's room sheet, set apart from the rooms because it is not one. */
.tg-mycard { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--tg-line); }
.tg-room-item--card svg { color: var(--tg-me); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.tg-room-item--make svg { color: var(--tg-me); }
.tg-rail__note { margin: 0 10px; font-size: 12.5px; color: var(--text-muted); }
.tg-firstroom { margin: 6px 4px 16px; padding: 14px; border: 1px dashed var(--tg-line-2); border-radius: 12px; font-size: 13.5px; color: var(--text-secondary); }
.tg-firstroom b { display: block; margin-bottom: 4px; font: 700 15px var(--font-heading); color: var(--text); }

/* The heading: the room's name. On a phone it is the button that opens the room sheet. */
.tg-sb .tg-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 28px; align-items: end; margin-bottom: 18px; }
.tg-sb .tg-top__actions { flex-direction: column; align-items: flex-end; margin-top: 0; }
.tg-room-title { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; background: none; color: var(--text); font: 800 42px/1 var(--font-heading); letter-spacing: -.035em; text-align: left; cursor: default; }
.tg-room-title__chev, .tg-room-title__badge { display: none; }
.tg-room-title__badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--tg-me); color: var(--tg-on-me); font: 700 12px/22px var(--font-mono); letter-spacing: 0; text-align: center; }

/* Toolbar extras: the card toggle, Sort by name, Select */
.tg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 6px; }
.tg-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; }
.tg-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tg-toggle__track { position: relative; flex: none; width: 40px; height: 24px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-pill); background: var(--bg-3); transition: background var(--tg-base) var(--tg-ease); }
.tg-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-secondary); transition: transform var(--tg-base) var(--tg-ease), background var(--tg-base) var(--tg-ease); }
.tg-toggle input:checked + .tg-toggle__track { background: var(--tg-me); border-color: var(--tg-me); }
.tg-toggle input:checked + .tg-toggle__track::after { transform: translateX(16px); background: var(--tg-on-me); }
.tg-toggle input:focus-visible + .tg-toggle__track { outline: 2px solid var(--tg-me); outline-offset: 2px; }
.tg-textbtn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--text-secondary); font: 400 13.5px var(--font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tg-textbtn[aria-pressed="true"] { color: var(--text); font-weight: 600; }

/* ROOM ONLY: the network strip on Everyone and the room's map in the insight card */
.tg-net { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--tg-line); border-radius: 14px; background: var(--bg-1); }
.tg-net svg { flex: none; width: 84px; height: 84px; overflow: visible; }
.tg-net p { margin: 0; font-size: 14px; color: var(--text-secondary); }
.tg-net p b { color: var(--text); font-weight: 600; }
.tg-map { margin: 0; }
.tg-map svg { display: block; width: 250px; height: 250px; overflow: visible; }
.tg-map figcaption { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
.tg-map__ring { fill: none; stroke: var(--tg-line-2); }
.tg-map__axes { fill: none; stroke: var(--bg-1); stroke-width: 2; }
.tg-map__q { cursor: pointer; outline: none; }
.tg-map__q[data-quadrant="D"] { color: var(--disc-d); } .tg-map__q[data-quadrant="I"] { color: var(--disc-i); }
.tg-map__q[data-quadrant="S"] { color: var(--disc-s); } .tg-map__q[data-quadrant="C"] { color: var(--disc-c); }
.tg-map__q path { fill: currentColor; fill-opacity: .14; transition: fill-opacity var(--tg-base) var(--tg-ease); }
.tg-map__q text { fill: currentColor; stroke: none; font: 800 15px var(--font-heading); text-anchor: middle; }
.tg-map__letter { dominant-baseline: central; }
/* Q111-MAP1 (Kevin, September 25): `.tg svg` (line 51) strokes icons with currentColor, and the map inherited it, so the clear
   tap circle around every dot drew a white ring through the name. Only the focus ring (line 962) draws it now. */
.tg-map__hit { stroke: none; }
.tg-map__leader { stroke: var(--text-muted); stroke-width: 1; }
.tg-map__dot .tg-map__count { fill: var(--tg-on-type); stroke: none; font-size: 12px; }
.tg-map__q:hover path, .tg-map__q:focus-visible path, .tg-map__q:has(.tg-map__key:focus-visible) path { fill-opacity: .3; }
.tg-map__q[aria-pressed="true"] path { fill-opacity: .38; stroke: var(--text); stroke-width: 2px; }
.tg-map.is-filtered .tg-map__q[aria-pressed="false"] path { fill-opacity: .06; }
.tg-map__dot { cursor: pointer; outline: none; }
.tg-map__fill { stroke: var(--bg-1); stroke-width: 2; }
.tg-map__dot text { fill: var(--tg-on-type); font: 700 10px var(--font-heading); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.tg-map__you-ring { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 2 3; }
.tg-map__you { fill: var(--tg-me); }

/* The insight card (ROOMS_AND_PROSPECTING section 2): four insights, each shown from its room size or waiting in words */
.tg-insight { margin: 0 0 22px; padding: 22px; border: 1px solid var(--tg-line-2); border-radius: 18px; background: linear-gradient(160deg, var(--bg-2), var(--bg-1) 70%); }
.tg-insight__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; }
.tg-insight__head h2 { margin: 0; font: 700 18px/1.3 var(--font-heading); color: var(--text); word-spacing: normal; }
.tg-insight__head p { margin: 0; font-size: 13px; color: var(--text-muted); }
.tg-insight__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: start; }
.tg-ins { padding: 14px 0; border-top: 1px solid var(--tg-line); }
.tg-ins:first-child { padding-top: 0; border-top: 0; }
.tg-ins h3 { display: flex; gap: 10px; align-items: baseline; margin: 0 0 6px; font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); word-spacing: normal; }
.tg-ins h3 small { font: 500 10.5px var(--font-mono); letter-spacing: .06em; text-transform: none; color: var(--text); }
.tg-ins__lead { margin: 0; font: 600 19px/1.35 var(--font-heading); color: var(--text); text-wrap: pretty; }
.tg-ins__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tg-ins__lines li { display: grid; grid-template-columns: 86px 1fr; gap: 10px; font-size: 14px; color: var(--text); }
.tg-ins__lines b { padding-top: 2px; font: 500 11.5px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.tg-ins__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.tg-ins__pair > div { padding: 12px; border: 1px solid var(--tg-line); border-radius: 12px; background: var(--bg-0); font-size: 13.5px; color: var(--text-secondary); }
.tg-ins__pair b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 600 14px var(--font-heading); color: var(--text); }
.tg-ins__pair .tg-badge { width: 26px; height: 26px; border-radius: 7px; font-size: 10px; }
/* A waiting insight says when it arrives; rooms.js shows [data-ready] or [data-waiting] inside each slot. */
.tg-ins[data-state="waiting"] .tg-ins__lead { font: 500 14.5px/1.45 var(--font-body); color: var(--text-muted); }
.tg-insight__deep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--tg-line-2); border-radius: 12px; font-size: 13.5px; color: var(--text-secondary); }
.tg-insight__deep b { color: var(--text); font-weight: 600; }
.tg-room-empty { max-width: 620px; padding: 26px; border: 1px dashed var(--tg-line-2); border-radius: 16px; }
.tg-room-empty h2 { margin: 0; font: 700 21px/1.25 var(--font-heading); word-spacing: normal; }
.tg-room-empty p { margin: 8px 0 0; font-size: 14.5px; color: var(--text-secondary); }

/* Selection mode: a checkbox column on a laptop, entered by Select or by a long press on a phone */
.tg-sel { display: none; place-items: center; }
.tg-sel input { width: 24px; height: 24px; margin: 0; accent-color: var(--tg-me); }
.tg[data-selecting="true"] .tg-row { grid-template-columns: 62px 28px 40px minmax(170px, 1.2fr) minmax(110px, .9fr) 140px; }
.tg[data-selecting="true"] .tg-sel { display: grid; }
.tg[data-selecting="true"] .tg-row > .tg-acts { display: none; }
.tg-row:has([data-row-select]:checked) { background: linear-gradient(90deg, transparent 62px, color-mix(in srgb, var(--tg-me) 10%, transparent) 62px); }
.tg-selbar { position: sticky; bottom: calc(var(--wt-bottom-height, 0px) + 12px); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 8px); margin: 18px auto 0; padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--text); color: var(--bg-0); box-shadow: var(--tg-raise); }
.tg-selbar b { margin-right: 6px; font: 700 14px var(--font-heading); }
.tg-selbar .tg-act { background: var(--bg-0); border-color: var(--bg-0); color: var(--text); font-weight: 600; }
.tg-selbar .tg-act--ghost { background: transparent; border-color: color-mix(in srgb, var(--bg-0) 30%, transparent); color: var(--bg-0); }

/* Dialogs: Make a room, Rename, Add to room. A popover on a laptop, a bottom sheet on a phone. */
.tg-dialog { position: fixed; z-index: 9003; left: 50%; top: calc(var(--wt-top-height, 64px) + 60px); width: 440px; max-width: calc(100vw - 24px); padding: 22px; border: 1px solid var(--tg-line-2); border-radius: 16px; background: var(--tg-surface); box-shadow: var(--tg-raise); color: var(--text); opacity: 0; transform: translate(-50%, 6px); transition: opacity var(--tg-fast) var(--tg-ease), transform 170ms var(--tg-ease); }
.tg-dialog.is-open { opacity: 1; transform: translate(-50%, 0); }
.tg-dialog h2 { margin: 0; font: 700 21px/1.2 var(--font-heading); word-spacing: normal; }
.tg-dialog p { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }
.tg-dialog label.tg-field { display: block; margin: 16px 0 6px; font-size: 13.5px; color: var(--text-secondary); }
.tg-dialog input[type="text"] { display: block; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--tg-line-2); border-radius: 10px; background: var(--bg-0); color: var(--text); font: 400 15px var(--font-body); }
.tg-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.tg-kinds label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-pill); font-size: 13.5px; color: var(--text-secondary); cursor: pointer; }
.tg-kinds label:has(input:checked) { background: var(--text); border-color: var(--text); color: var(--bg-0); }
.tg-kinds input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tg-dialog__row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.tg-checks { display: grid; gap: 6px; margin-top: 14px; }
.tg-check { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border: 1px solid var(--tg-line-2); border-radius: 12px; cursor: pointer; }
.tg-check:has(input:checked) { border-color: var(--tg-me); background: color-mix(in srgb, var(--tg-me) 8%, transparent); }
.tg-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--tg-me); }
.tg-check b { font: 600 15px var(--font-heading); }
.tg-check small { margin-left: auto; font: 500 12px var(--font-mono); color: var(--text-muted); }
.tg-sheet-scrim { position: fixed; inset: var(--wt-top-height, 64px) 0 0 0; z-index: 9002; background: var(--tg-scrim); opacity: 0; transition: opacity var(--tg-base) var(--tg-ease); }
.tg-sheet-scrim.is-open { opacity: 1; }
.tg-room-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9003; max-height: 80dvh; overflow-y: auto; padding: 10px 12px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--tg-surface); transform: translateY(100%); transition: transform 180ms var(--tg-ease); }
.tg-room-sheet.is-open { transform: none; }
.tg-room-sheet__grab { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: var(--tg-line-2); }
.tg-toast { position: fixed; left: 50%; bottom: calc(var(--wt-bottom-height, 0px) + 20px); z-index: 9004; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: var(--text); color: var(--bg-0); font-size: 14px; font-weight: 600; box-shadow: var(--tg-raise); }

/* New arrivals (D15): the membership switch, and the follow-up panel under a row (card.js) */
.tg-arrivals-set { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--tg-line); border-radius: 12px; background: var(--bg-1); }
.tg-arrivals-set p { flex: 1 1 280px; margin: 0; font-size: 13.5px; color: var(--text-secondary); }
.tg-pill { padding: 3px 7px; border: 1px solid var(--tg-line-2); border-radius: 5px; font: 500 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.tg-fup { grid-column: 3 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin: 6px 0 14px; padding: 16px; border: 1px solid color-mix(in srgb, var(--c1, var(--tg-me)) 40%, var(--tg-line-2)); border-radius: 14px; background: var(--bg-1); }
.tg-fup--plain { grid-template-columns: 1fr; border-style: dashed; border-color: var(--tg-line-2); }
.tg-fup h4 { margin: 0 0 8px; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.tg-fup textarea { display: block; width: 100%; min-height: 136px; resize: vertical; padding: 10px 12px; border: 1px solid var(--tg-line-2); border-radius: 10px; background: var(--bg-0); color: var(--text); font: 400 14.5px/1.55 var(--font-body); }
.tg-fup__hint { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }
.tg-fup__private { min-height: 64px !important; margin-top: 10px; font-size: 13.5px !important; }
.tg-stage { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.tg-stage label { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-pill); font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.tg-stage label:has(input:checked) { background: var(--text); border-color: var(--text); color: var(--bg-0); }
.tg-stage input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tg-fup__remind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--text-secondary); }
.tg-fup__remind select { min-height: 36px; padding: 4px 8px; border: 1px solid var(--tg-line-2); border-radius: 8px; background: var(--bg-0); color: var(--text); font-size: 13px; }
.tg-fup__only { grid-column: 1 / -1; margin: 0; font: 500 11.5px var(--font-mono); letter-spacing: .03em; color: var(--text-muted); }

@media (max-width: 767px) {
  .tg-sb { display: block; }
  .tg-rail { display: none; }                         /* rooms.js clones the rail list into the room sheet */
  .tg-sb__main { padding: 18px var(--tg-gutter) 90px; }
  .tg-sb .tg-top { grid-template-columns: 1fr; }
  .tg-sb .tg-top__actions { flex-direction: row; align-items: center; justify-content: space-between; }
  .tg-room-title { font-size: 34px; cursor: pointer; }
  .tg-room-title__chev { display: block; width: 22px; height: 22px; color: var(--text-secondary); }
  .tg-room-title__badge:not([hidden]) { display: inline-block; }
  .tg-net svg { width: 72px; height: 72px; }
  .tg-insight { padding: 16px; border-radius: 16px; }
  .tg-insight__grid { grid-template-columns: 1fr; gap: 14px; }
  .tg-map { display: flex; align-items: center; gap: 14px; }
  .tg-map svg { flex: none; width: 170px; height: 170px; }
  .tg-map figcaption { margin: 0; }
  .tg-ins__lead { font-size: 17px; }
  .tg-ins__lines li { grid-template-columns: 1fr; gap: 0; }
  .tg-ins__pair { grid-template-columns: 1fr; }
  .tg[data-selecting="true"] .tg-row { grid-template-columns: 38px 40px minmax(0, 1fr); }
  .tg[data-selecting="true"] .tg-row > .tg-badge { visibility: hidden; }
  .tg-fup { grid-column: 1 / -1; grid-template-columns: 1fr; margin-left: 50px; }
  .tg-dialog { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; border-radius: 22px 22px 0 0; transform: translateY(100%); }
  .tg-dialog.is-open { transform: none; }
}
@media (min-width: 768px) {
  .tg-room-sheet, .tg-sheet-scrim { display: none !important; }
}
.tg-title-wrap { margin: 0; font-size: inherit; word-spacing: normal; }
.tg-empty__stub { width: 120px; height: 2px; background: repeating-linear-gradient(90deg, var(--tg-line-2) 0 6px, transparent 6px 10px); }
.tg-empty .tg-jack { margin: 0 0 16px; }
.tg-fup__acts { justify-content: flex-start; margin-top: 10px; }
.tg:not([data-room="everyone"]) [data-together-filters], .tg:not([data-room="everyone"]) [data-show-card-wrap] { display: none; }
/* ---------- /ROOMS ---------- */


/* ---------- 4. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tg *, .tg-qv, .tg-qv-scrim, .tg-dialog, .tg-room-sheet, .tg-sheet-scrim, .tg-toast { transition: none !important; animation: none !important; }
}

/* ---------- 5. ADD PEOPLE ----------
   /together/add (phase 1). One step visible at a time: add.js sets data-step on .tg-ap and removes hidden from the matching
   [data-step-panel]. Design artifact: https://claude.ai/artifact/2XKk3ggD6TSKwqXKxeAK27
   Prefix tg-ap- (the hub's Add people button already owns .tg-add). */
.tg-ap { max-width: 1080px; }
.tg-ap-step { padding: 0; }
.tg-ap-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-secondary); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.tg-ap-title { font: 800 40px/1.02 var(--font-heading); letter-spacing: -.035em; margin: 4px 0 0; text-wrap: balance; word-spacing: normal; }
.tg-ap-help { color: var(--text-secondary); font-size: 15px; margin: 8px 0 0; max-width: 62ch; }
.tg-ap-help a { color: var(--text); }
.tg-ap-helprow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 8px; }
.tg-ap-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font: 500 14px var(--font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tg-ap-link--scout::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--disc-c), color-mix(in srgb, var(--disc-c) 40%, var(--bg-0))); }
.tg-ap-examples { margin-top: 10px; padding: 14px 16px; border-left: 2px solid var(--tg-me); border-radius: 0 10px 10px 0; background: var(--bg-card); font-size: 14px; color: var(--text-secondary); max-width: 72ch; }
.tg-ap-examples p { margin: 0 0 8px; font-size: 14px; }
.tg-ap-examples dl { display: grid; grid-template-columns: minmax(0, max-content) 1fr; gap: 0 14px; margin: 0; }
.tg-ap-examples dt, .tg-ap-examples dd { margin: 0; padding: 7px 0; border-top: 1px solid var(--tg-line); }
.tg-ap-examples dt { font: 500 12px var(--font-mono); color: var(--text); overflow-wrap: anywhere; }

/* The note, first and largest */
.tg-ap-note { margin-top: 22px; padding: 24px 26px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--tg-me) 35%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--tg-me) 13%, var(--bg-1)), var(--bg-1) 60%); }
.tg-ap-note h2 { font: 700 22px/1.2 var(--font-heading); margin: 0; word-spacing: normal; }
.tg-ap-note__sub { font-size: 14px; color: var(--text-secondary); margin: 4px 0 14px; max-width: 60ch; }
.tg-ap-note__text { display: block; width: 100%; min-height: 120px; resize: vertical; padding: 14px 16px; border: 1px solid var(--tg-line-2); border-radius: 12px; background: var(--bg-0); color: var(--text); font: 400 17px/1.55 var(--font-body); }
.tg-ap-note__text:focus { outline: 2px solid var(--tg-me); outline-offset: 1px; }
.tg-ap-note__code { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font: 500 12.5px var(--font-mono); color: var(--text-muted); }
.tg-ap-note__code b { color: var(--text); font-weight: 600; letter-spacing: .08em; }
.tg-ap-note--small { padding: 20px 22px; }
.tg-ap-toast { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--text); }

/* Buttons for this flow */
.tg-ap-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tg-ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid var(--tg-line-2); border-radius: 10px; background: transparent; color: var(--text); font: 600 15px var(--font-heading); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--tg-fast) var(--tg-ease), filter var(--tg-fast) var(--tg-ease); }
.tg-ap-btn:hover { background: var(--bg-card-hover); }
.tg-ap-btn svg { width: 17px; height: 17px; }
.tg-ap-btn--me { background: var(--tg-me); border-color: var(--tg-me); color: var(--tg-on-me); }
.tg-ap-btn--me:hover { background: var(--tg-me); filter: brightness(1.08); }
.tg-ap-btn--solid { background: var(--text); border-color: var(--text); color: var(--bg-0); }
.tg-ap-btn--solid:hover { background: var(--text); filter: brightness(1.1); }
.tg-ap-btn:disabled { opacity: .5; cursor: default; }

/* The doors under the note */
.tg-ap-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.tg-ap-door, .tg-ap-door__main { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; }
.tg-ap-door { padding: 20px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-lg); background: var(--bg-card); transition: border-color var(--tg-base) var(--tg-ease), transform var(--tg-base) var(--tg-ease); }
.tg-ap-door:hover { border-color: var(--tg-me); transform: translateY(-1px); }
.tg-ap-door svg { width: 28px; height: 28px; color: var(--tg-me); stroke-width: 1.8; margin-bottom: 4px; }
.tg-ap-door b { font: 700 18px/1.2 var(--font-heading); }
.tg-ap-door span { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.tg-ap-templates { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.tg-ap-templates a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Paste and file */
.tg-ap-paste { display: block; width: 100%; min-height: 260px; margin-top: 20px; padding: 16px; resize: vertical; border: 1px solid var(--tg-line-2); border-radius: 14px; background: var(--bg-1); color: var(--text); font: 400 14px/1.7 var(--font-mono); }
.tg-ap-drop { display: grid; gap: 12px; justify-items: start; margin-top: 20px; padding: 28px; border: 1.5px dashed var(--tg-line-2); border-radius: 16px; cursor: pointer; transition: border-color var(--tg-base) var(--tg-ease); }
.tg-ap-drop:hover, .tg-ap-drop.is-over, .tg-ap-drop:focus-within { border-color: var(--tg-me); }
.tg-ap-drop__empty { font: 600 16px var(--font-heading); }
.tg-ap-file { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--tg-line-2); border-radius: 12px; background: var(--bg-1); width: 100%; max-width: 520px; }
.tg-ap-file__ext { display: grid; place-items: center; width: 40px; height: 48px; border-radius: 6px; background: color-mix(in srgb, var(--disc-s) 25%, var(--bg-2)); font: 700 11px var(--font-mono); text-transform: uppercase; }
.tg-ap-file b { display: block; font: 600 15px var(--font-heading); }
.tg-ap-file small { font-size: 12.5px; color: var(--text-muted); }
.tg-ap-local { margin: 12px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.tg-ap-sheets { display: grid; gap: 10px; max-width: 640px; margin: 20px 0 0; padding: 0; border: 0; }
.tg-ap-sheet { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--tg-line-2); border-radius: 12px; cursor: pointer; transition: border-color var(--tg-fast) var(--tg-ease), background var(--tg-fast) var(--tg-ease); }
.tg-ap-sheet:has(input:checked) { border-color: var(--tg-me); background: color-mix(in srgb, var(--tg-me) 8%, transparent); }
.tg-ap-sheet:has(input:disabled) { opacity: .6; cursor: default; }
.tg-ap-sheet input { width: 18px; height: 18px; margin: 0; accent-color: var(--tg-me); }
.tg-ap-sheet b { font: 600 16px var(--font-heading); }
.tg-ap-sheet i { font: normal 500 12px var(--font-mono); color: var(--text-secondary); }
.tg-ap-sheet small { grid-column: 2 / 4; font-size: 13px; color: var(--text-muted); }

/* Google consent: two buttons of equal size and weight (CONTRACT 7) */
.tg-ap-consent { max-width: 560px; margin-top: 28px; padding: 26px; border: 1px solid var(--tg-line-2); border-radius: 18px; background: var(--bg-1); }
.tg-ap-consent h2 { font: 700 24px/1.2 var(--font-heading); margin: 0; word-spacing: normal; }
.tg-ap-consent p { margin: 10px 0 0; font-size: 15px; color: var(--text-secondary); }
.tg-ap-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.tg-ap-equal .tg-ap-btn { width: 100%; }

/* The check step: summary, columns, grid */
.tg-ap-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.tg-ap-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-pill); font-size: 13px; color: var(--text-secondary); }
.tg-ap-pill b { font: 600 13px var(--font-mono); color: var(--text); }
.tg-ap-pill--bad { border-color: color-mix(in srgb, var(--error) 50%, transparent); color: var(--error-light, #fca5a5); }
.tg-ap-pill--bad b { color: inherit; }
.tg-ap-pill--on { border-color: color-mix(in srgb, var(--tg-me) 50%, transparent); color: var(--tg-me); }
.tg-ap-pill--on b { color: inherit; }
.tg-ap-columns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 14px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.tg-ap-columns select { min-height: 36px; padding: 4px 8px; border: 1px solid var(--tg-line-2); border-radius: 8px; background: var(--bg-1); color: var(--text); font-size: 13px; }
.tg-ap-grid { margin-top: 16px; border-top: 1px solid var(--tg-line-2); }
.tg-ap-gr { display: grid; grid-template-columns: 44px minmax(150px, 1fr) minmax(200px, 1.2fr) minmax(240px, 1.4fr); gap: 0 16px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--tg-line); }
.tg-ap-gr--head { padding-block: 10px; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.tg-ap-gr[data-kind="fix"] { background: color-mix(in srgb, var(--error) 8%, transparent); }
.tg-ap-gr[data-included="false"] .tg-ap-name, .tg-ap-gr[data-included="false"] .tg-ap-email__text { color: var(--text-muted); text-decoration: line-through; }
.tg-ap-include { width: 20px; height: 20px; margin: 0 0 0 8px; accent-color: var(--tg-me); }
.tg-ap-name { width: 100%; min-width: 0; padding: 4px 6px; margin-left: -6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: 600 15px var(--font-heading); }
.tg-ap-name:hover, .tg-ap-name:focus { border-color: var(--tg-line-2); background: var(--bg-0); }
.tg-ap-email__text { font: 400 13.5px var(--font-mono); color: var(--text-secondary); overflow-wrap: anywhere; }
.tg-ap-fix { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-ap-fix input { flex: 1 1 180px; min-width: 0; min-height: 36px; padding: 6px 10px; border: 1px solid var(--error); border-radius: 8px; background: var(--bg-0); color: var(--text); font: 400 13.5px var(--font-mono); }
.tg-ap-fix button { min-height: 36px; padding: 0 12px; border: 1px solid var(--tg-line-2); border-radius: 8px; background: var(--bg-2); color: var(--text); font: 600 13px var(--font-body); cursor: pointer; }
.tg-ap-found { display: grid; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.tg-ap-found__line { display: inline-flex; align-items: flex-start; gap: 7px; }
.tg-ap-found__line::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .45em; border-radius: 50%; background: var(--tg-gray); }
.tg-ap-gr[data-kind="fix"] .tg-ap-found__line { color: var(--error-light, #fca5a5); font-weight: 600; }
.tg-ap-gr[data-kind="fix"] .tg-ap-found__line::before { background: var(--error); }
.tg-ap-gr[data-kind="on_wiredtype"] .tg-ap-found__line { color: var(--tg-me); font-weight: 600; }
.tg-ap-gr[data-kind="on_wiredtype"] .tg-ap-found__line::before { background: var(--tg-me); }
.tg-ap-gr[data-kind="instant"] .tg-ap-found__line { color: var(--text); font-weight: 600; }
.tg-ap-gr[data-kind="instant"] .tg-ap-found__line::before { background: var(--disc-i); }
.tg-ap-gr[data-kind="in_list"] .tg-ap-found__line::before, .tg-ap-gr[data-kind="connected"] .tg-ap-found__line::before { background: transparent; border: 1.5px solid var(--text-muted); }
.tg-badge--mini { width: 22px; height: 22px; font-size: 9.5px; }
.tg-ap-more { margin: 10px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.tg-ap-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.tg-ap-tags > span { margin-right: 4px; font-size: 14px; color: var(--text-secondary); }
.tg-ap-tchip { min-height: 44px; padding: 0 13px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font: 500 13.5px var(--font-body); cursor: pointer; transition: background var(--tg-fast) var(--tg-ease), color var(--tg-fast) var(--tg-ease); }
.tg-ap-tchip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg-0); }
.tg-ap-tchip--add { border-style: dashed; }

/* The choice: Send it myself first, WiredType second (D4) */
.tg-ap-choice { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 26px; }
.tg-ap-opt { padding: 22px; border: 1px solid var(--tg-line-2); border-radius: 16px; }
.tg-ap-opt--first { border-color: color-mix(in srgb, var(--tg-me) 45%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--tg-me) 12%, var(--bg-1)), var(--bg-1) 70%); }
.tg-ap-opt h2 { font: 700 20px/1.2 var(--font-heading); margin: 0; word-spacing: normal; }
.tg-ap-opt p { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }
.tg-ap-opt p b { color: var(--text); font-weight: 600; }
.tg-ap-opt__why { margin: 0 0 6px !important; font: 500 11px var(--font-mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--tg-me) !important; }
.tg-ap-opt__why--quiet { color: var(--text-muted) !important; }
.tg-ap-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tg-ap-group { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid var(--tg-line-2); border-radius: 8px; font: 500 12px var(--font-mono); color: var(--text-secondary); text-decoration: none; }
.tg-ap-group.is-done { border-color: var(--tg-me); color: var(--tg-me); }
.tg-ap-pace { margin-top: 12px !important; padding: 10px 12px; border-radius: 10px; background: var(--bg-card); color: var(--text) !important; }
.tg-ap-pace small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.tg-ap-remind { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; color: var(--text); max-width: 560px; cursor: pointer; }
.tg-ap-remind input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tg-me); }
.tg-ap-remind small { display: block; font-size: 12.5px; color: var(--text-muted); }
.tg-ap-peek { margin-top: 10px; }
.tg-ap-peek summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 13.5px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.tg-ap-peek summary::-webkit-details-marker { display: none; }
.tg-ap-mailpeek { padding: 14px; border: 1px solid var(--tg-line); border-radius: 10px; background: var(--bg-0); font-size: 13px; color: var(--text-secondary); }

/* Confirmation */
.tg-ap-done { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.tg-ap-done__tick { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--tg-me); }
.tg-ap-done__tick::before { content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 11px; border-left: 3px solid var(--tg-on-me); border-bottom: 3px solid var(--tg-on-me); transform: rotate(-45deg); }
.tg-ap-next { list-style: none; max-width: 640px; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--tg-line-2); counter-reset: next; }
.tg-ap-next li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--tg-line); font-size: 14.5px; color: var(--text-secondary); counter-increment: next; }
.tg-ap-next li::before { content: counter(next); position: absolute; left: 0; top: 13px; font: 600 12px var(--font-mono); color: var(--text-muted); }
.tg-ap-next b { color: var(--text); font-weight: 600; }

@media (max-width: 767px) {
  .tg-ap-title { font-size: 31px; }
  .tg-ap-note { padding: 18px; border-radius: 16px; }
  .tg-ap-note__text { min-height: 170px; font-size: 15.5px; }
  .tg-ap-btns .tg-ap-btn { flex: 1 1 auto; }
  .tg-ap-doors, .tg-ap-choice { grid-template-columns: 1fr; gap: 12px; }
  .tg-ap-paste { min-height: 300px; font-size: 12.5px; }
  .tg-ap-examples dl { grid-template-columns: 1fr; }
  .tg-ap-examples dd { border-top: 0; padding-top: 0; }
  .tg-ap-gr { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "c n" ". e" ". f"; gap: 2px 10px; padding: 12px 0; align-items: start; }
  .tg-ap-gr--head { display: none; }
  .tg-ap-gr > :nth-child(1) { grid-area: c; padding-top: 4px; }
  .tg-ap-gr > :nth-child(2) { grid-area: n; }
  .tg-ap-gr > :nth-child(3) { grid-area: e; }
  .tg-ap-gr > :nth-child(4) { grid-area: f; margin-top: 4px; }
  .tg-ap-include { margin-left: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-ap *, .tg-ap-door { transition: none !important; }
}
/* ---------- /ADD PEOPLE ---------- */

/* ---------- 6. SETTINGS ----------
   /together/settings and the Together card on the account page (proposed/fragments/account_together_card.html).
   Design artifact: https://claude.ai/artifact/8atUZWCzXKVsRcYxeEz4WQ
   settings.js shows [data-saved] under the control that changed and redraws the "What others see" cards. */
.tg-st { max-width: 1120px; }
.tg-st-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; margin-top: 26px; }
.tg-st-group { padding: 22px 0; border-top: 1px solid var(--tg-line-2); }
.tg-st-group h2 { margin: 0 0 14px; font: 700 13px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); word-spacing: normal; }
.tg-st-set { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: start; }
.tg-st-set + .tg-st-set { margin-top: 18px; }
.tg-st-lbl { margin: 0; font: 600 16.5px/1.35 var(--font-heading); color: var(--text); }
.tg-st-one, .tg-st-foot { grid-column: 1 / -1; margin: 0; max-width: 62ch; font-size: 14px; color: var(--text-secondary); }
.tg-st-foot { margin-top: 10px; font-size: 13.5px; }
.tg-st-why { grid-column: 1 / -1; margin: 4px 0 0; font: 500 12px var(--font-mono); color: var(--text-muted); }
.tg-st-saved { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--tg-me); }
.tg-st-sw { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.tg-st-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tg-st-sw__track { position: relative; width: 48px; height: 28px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-pill); background: var(--bg-3); transition: background var(--tg-base) var(--tg-ease), border-color var(--tg-base) var(--tg-ease); }
.tg-st-sw__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-secondary); transition: transform var(--tg-base) var(--tg-ease), background var(--tg-base) var(--tg-ease); }
.tg-st-sw input:checked + .tg-st-sw__track { background: var(--tg-me); border-color: var(--tg-me); }
.tg-st-sw input:checked + .tg-st-sw__track::after { transform: translateX(20px); background: var(--tg-on-me); }
.tg-st-sw input:focus-visible + .tg-st-sw__track { outline: 2px solid var(--tg-me); outline-offset: 2px; }
.tg-st-sw input:disabled + .tg-st-sw__track { opacity: .5; }
.tg-st-sw__state { min-width: 22px; font: 500 12px var(--font-mono); color: var(--text-muted); }
.tg-st-radios { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 8px; }
.tg-st-radio { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--tg-line-2); border-radius: 12px; cursor: pointer; transition: border-color var(--tg-fast) var(--tg-ease), background var(--tg-fast) var(--tg-ease); }
.tg-st-radio:has(input:checked) { border-color: var(--tg-me); background: color-mix(in srgb, var(--tg-me) 8%, transparent); }
.tg-st-radio input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--tg-me); }
.tg-st-radio span { font-size: 15px; color: var(--text); }
.tg-st-instant { grid-column: 1 / -1; margin: 12px 0 0; padding: 12px 14px; border: 1px dashed var(--tg-line-2); border-radius: 10px; font-size: 14px; color: var(--text-secondary); }
.tg-st-instant b { color: var(--text); font-weight: 600; }
.tg-st-instant--on { border-style: solid; border-color: color-mix(in srgb, var(--disc-i) 50%, transparent); color: var(--text); }
.tg-st-blocked { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tg-line); }
.tg-st-blocked__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--tg-line); }
.tg-st-blocked__row small { display: block; font-size: 12.5px; color: var(--text-muted); }
.tg-st-blocked__row .tg-act { margin-left: auto; }
.tg-st-note { margin: 10px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.tg-st-to { display: inline-flex; margin-top: 18px; min-height: 44px; align-items: center; font-size: 14px; color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* What others see */
.tg-st-see { display: grid; gap: 14px; }
aside.tg-st-see { position: sticky; top: calc(var(--wt-top-height, 64px) + 18px); }
.tg-st-see h2 { margin: 0; font: 700 13px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); word-spacing: normal; }
.tg-st-see--inline:empty { display: none; }
.tg-st-see--inline { margin-top: 14px; }
.tg-st-card { padding: 16px; border: 1px solid var(--tg-line-2); border-radius: 14px; background: var(--bg-1); }
.tg-st-card__q { margin: 0 0 10px; font: 500 11.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tg-st-card__line { margin: 8px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.tg-st-card__line b { color: var(--text); font-weight: 600; }
.tg-st-minirow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--tg-line); border-radius: 10px; background: var(--bg-0); }
.tg-st-minirow .tg-badge { width: 36px; height: 36px; font-size: 12px; }
.tg-st-mail { margin: 0; padding: 10px 12px; border: 1px solid var(--tg-line); border-radius: 10px; background: var(--bg-0); font-size: 13px; color: var(--text); }
.tg-st-mail + .tg-st-mail { margin-top: 8px; }
.tg-st-mail small { display: block; font: 500 11px var(--font-mono); letter-spacing: .04em; color: var(--text-muted); }
.tg-st-mail[data-off="true"] { opacity: .45; text-decoration: line-through; }

/* The account page card: the page's auth-card supplies the box */
.tg-st-acct .tg-st-set + .tg-st-set { padding-top: 18px; border-top: 1px solid var(--tg-line); }
.tg-st-acct .tg-st-lbl { font-size: 15.5px; }
.tg-st-acct__foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--tg-line); }
.tg-st-acct__foot a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .tg-st-grid { grid-template-columns: 1fr; gap: 0; }
  aside.tg-st-see { display: none; }   /* settings.js moves each card into its [data-see-slot] */
}
@media (prefers-reduced-motion: reduce) {
  .tg-st-sw__track, .tg-st-sw__track::after, .tg-st-radio { transition: none !important; }
}
/* ---------- /SETTINGS ---------- */

/* Shared settings, including the account page. */
.tg-settings { display: grid; gap: 20px; color: var(--text); }
.tg-settings fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; min-width: 0; }
.tg-settings legend { margin-bottom: 16px; font-weight: 600; }
.tg-settings label { display: flex; align-items: baseline; gap: 12px; }
.tg-settings input { flex: none; }
.tg-settings p { color: var(--text-secondary); margin: 6px 0 0; }
.tg-settings button { justify-self: start; }
.tg-page [hidden] { display: none !important; }
.tg-act:disabled, .tg-act[aria-disabled="true"], .tg-add[aria-disabled="true"] { opacity: .55; cursor: default; }
.tg-qv { max-height: calc(100dvh - 110px); overflow-y: auto; }
.tg-room__dot { cursor: pointer; fill: var(--tg-me); }

/* Phase 0 room controls and map. */
.tg-dialog { max-height: calc(100dvh - var(--wt-top-height, 64px) - 40px); overflow-y: auto; }
.tg-room-order { display: flex; justify-content: flex-end; }
.tg-room-order .tg-act { padding: 0 7px; font-size: 11px; }
.tg-style-count { padding: 8px 0; }
.tg-style-count meter { width: 100%; }
.tg-map__dot .tg-map-label { fill: var(--text); stroke: none; font-size: 14px; }
/* Q111-MAP1: a name near the center crosses a quadrant line; a halo in the card's color keeps the line from running through the
   word (the compare map does the same, together-comparison.css line 131). */
.tg-map__dot .tg-map-label { paint-order: stroke; stroke: var(--bg-2); stroke-width: 4px; stroke-linejoin: round; }
.tg-room-chip .tg-act { min-height: 44px; padding: 0; font-size: inherit; }
.tg-inv__rows .tg-row__spacer { display: block; }
.tg-toast { max-width: calc(100vw - 24px); }
@media (min-width: 768px) {
  .tg-sheet-scrim.is-open, .tg-room-sheet.is-open { display: block !important; }
  .tg-room-sheet { left: 20%; right: 20%; }
  .tg-row { grid-template-columns: 34px 40px minmax(110px, 1fr) minmax(60px, .6fr) auto; gap: 0 10px; }
  .tg-row > .tg-status { display: none; }
  .tg-status--inline { display: inline-flex; }
  .tg-row > .tg-acts { grid-column: 3 / -1; justify-content: flex-start; }
  .tg[data-selecting="true"] .tg-row { grid-template-columns: 34px 28px 40px minmax(110px, 1fr) minmax(60px, .6fr); }
}

@media (max-width: 767px) {
  .tg-dialog, .tg-room-sheet { bottom: var(--wt-bottom-height, 64px); }
  .tg-sheet-scrim { bottom: var(--wt-bottom-height, 64px); }
}

/* Private labels share the room sheet and selection controls. */
.tg-find { flex-wrap: wrap; }
.tg-filter { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-secondary); }
.tg-filter select { min-width: 0; max-width: 260px; min-height: 40px; border: 1px solid var(--tg-line-2); border-radius: 10px; padding: 6px 10px; color: var(--text); background: var(--tg-surface); }
.tg-chips-labels { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 6px 0; padding: 0; min-width: 0; }
.tg-chips-labels:empty { display: none; }
.tg-label-chip { max-width: 100%; overflow-wrap: anywhere; padding: 3px 9px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-pill); color: var(--text-secondary); font-size: 12px; }
.tg[data-selecting="true"] .tg-chips-labels { grid-column: 4 / -1; }
[data-label-dialog] .tg-check b, [data-label-dialog] h2 { min-width: 0; overflow-wrap: anywhere; }
[data-label-dialog] .tg-check small { white-space: normal; }
@media (max-width: 767px) {
  .tg-row { grid-template-areas: "r b w" "r . l" "r . c" "r . a"; }
  .tg-row > .tg-chips-labels, .tg[data-selecting="true"] .tg-row > .tg-chips-labels { grid-area: l; }
  .tg-filter { flex: 1 1 100%; }
  .tg-filter select { flex: 1; max-width: 100%; }
}
.tg-wire, .tg-jn { pointer-events: none; }

/* ---------- 7. THE ROOM CARD, sections 2 to 6, and the structure layer (phase 2, comparison lane) ----------
   rooms.js renders [data-room-card] inside the insight card; ties.js draws the Tree, Chart and Circles views and the
   pickers. Built on the insight card's own .tg-ins blocks so the phase 0 map and mix keep their look. */
.tg-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -4px 0 14px; }
.tg-setting { padding: 4px 10px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-pill); font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--text-secondary); }
.tg-viewbar__toggles { display: inline-flex; gap: 6px; }
.tg-viewbar .tg-act[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg-0); }
.tg-structure-view { margin: 0 0 8px; }
.tg-view__scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; }
.tg-view__scroll svg { display: block; margin: 0 auto; }
.tg-view__note, .tg-view__none { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.tg-view__none { font-size: 15px; color: var(--text-secondary); }
.tg-tree__gen { fill: var(--text-muted); font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.tg-tree__edge { stroke: var(--text-secondary); stroke-width: 2; }
.tg-tree__edge[data-line="dotted"] { stroke-dasharray: 2 5; stroke-linecap: round; }
.tg-tree__edge[data-line="dashed"] { stroke-dasharray: 7 5; stroke: var(--text-muted); }
.tg-tree__node circle:first-child { stroke: var(--bg-1); stroke-width: 3; }
.tg-tree__node, .tg-chart__node { cursor: pointer; outline: none; }
.tg-tree__node:focus-visible circle:first-child, .tg-chart__node:focus-visible rect:first-child { stroke: var(--text); }
.tg-tree__name { fill: var(--text); font: 600 12.5px var(--font-body); text-anchor: middle; }
.tg-chart__edge { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.tg-chart__node rect:first-child { fill: var(--bg-0); stroke-width: 1.5; }
.tg-chart__node.is-outside rect:first-child { stroke-dasharray: 4 3; }
.tg-chart__name { fill: var(--text); font: 600 13px var(--font-heading); text-anchor: middle; }
.tg-chart__role { fill: var(--text-muted); font: 400 11px var(--font-body); text-anchor: middle; }
.tg-circles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tg-circle { padding: 12px 14px; border: 1px solid var(--tg-line-2); border-radius: 18px; background: var(--bg-0); }
.tg-circle__label { display: block; margin-bottom: 8px; font: 600 14px var(--font-heading); }
.tg-circle__people { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-person-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px 0 8px; border: 1px solid var(--tg-line-2); border-radius: var(--radius-pill); font-size: 13px; cursor: pointer; }
.tg-person-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--chip, var(--tg-gray)); }

.tg-roomcard { margin-top: 18px; border-top: 1px solid var(--tg-line); }
.tg-roomcard .tg-ins { padding: 18px 0 16px; }
.tg-roomcard .tg-ins:first-child { padding-top: 18px; border-top: 0; }
.tg-roomcard p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.tg-roomcard h4 { margin: 14px 0 6px; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); word-spacing: normal; }
.tg-ins__sub { color: var(--text-secondary) !important; }
.tg-private { margin-top: 10px !important; font: 500 12px var(--font-mono) !important; letter-spacing: .02em; color: var(--text-muted) !important; }
.tg-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--tg-line-2); border-radius: 12px; }
.tg-more b { grid-column: 1 / -1; font: 600 14px var(--font-heading); }
.tg-more p { margin: 0 !important; }
.tg-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tg-group { position: relative; padding: 12px 14px 12px 18px; border: 1px solid var(--tg-line); border-radius: 12px; background: var(--bg-0); }
.tg-group::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tg-gray); }
.tg-group[data-style="D"]::before { background: var(--disc-d); } .tg-group[data-style="I"]::before { background: var(--disc-i); }
.tg-group[data-style="S"]::before { background: var(--disc-s); } .tg-group[data-style="C"]::before { background: var(--disc-c); }
.tg-group__name { display: block; margin-bottom: 6px; font: 700 15px var(--font-heading); }
.tg-group__label { font-weight: 600; }
.tg-group__hand { color: var(--text-secondary) !important; }
.tg-group__people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tg-group__more { align-self: center; font: 500 12px var(--font-mono); color: var(--text-muted); }
.tg-person { min-height: 32px; padding: 0 10px; font-size: 13px; }
.tg-bridge b { font-weight: 600; }
.tg-paircard { padding: 12px 14px; border: 1px solid var(--tg-line); border-radius: 12px; background: var(--bg-0); }
.tg-paircard__h { display: block; margin-bottom: 4px; font: 600 14px var(--font-heading); }
.tg-paircard__class { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font: 500 11px var(--font-mono); background: var(--bg-2); color: var(--text-secondary); }
.tg-paircard__need { color: var(--text-secondary) !important; }
.tg-paircard[data-fit="strong"] .tg-paircard__class, .tg-paircell[data-fit="strong"] { border-color: color-mix(in srgb, var(--disc-s) 55%, var(--tg-line-2)); }
.tg-paircard[data-fit="patience"] .tg-paircard__class, .tg-paircell[data-fit="patience"] { border-color: color-mix(in srgb, var(--disc-d) 55%, var(--tg-line-2)); }
.tg-pairgrid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tg-paircell { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--tg-line-2); border-radius: 10px; font-size: 13px; background: transparent; color: var(--text); }
button.tg-paircell[aria-pressed="true"] { background: var(--text); color: var(--bg-0); }
.tg-pairpicked { margin-top: 10px; }
.tg-aggtable { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 14px; }
.tg-aggtable th { padding: 6px 8px; text-align: left; font: 500 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--tg-line-2); }
.tg-aggtable td { padding: 8px; vertical-align: top; border-bottom: 1px solid var(--tg-line); }
.tg-aggtable td:nth-child(2) { font: 600 14px var(--font-heading); font-variant-numeric: tabular-nums; }
.tg-ask { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.tg-ask dt { font: 600 14.5px var(--font-heading); }
.tg-ask dd { margin: 0; font-size: 14.5px; line-height: 1.5; }
.tg-ask dd .tg-person { margin-right: 4px; }
.tg-tie { padding: 10px 0; border-top: 1px solid var(--tg-line); }
.tg-tie__lead { font-weight: 600; }
.tg-tie__sub { color: var(--text-secondary) !important; }
.tg-dialog--wide { width: 560px; max-height: calc(100dvh - var(--wt-top-height, 64px) - 90px); overflow-y: auto; }
.tg-tielist { display: grid; gap: 10px; margin-top: 14px; }
.tg-tielist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--tg-line); }
.tg-tielist__row .tg-tiepick, .tg-tielist__acts, .tg-tielist__q { grid-column: 1 / -1; }
.tg-tielist__q { margin: 0 !important; font: 600 15px var(--font-heading) !important; color: var(--text) !important; }
.tg-tielist__who { display: grid; gap: 2px; margin: 0 !important; }
.tg-tielist__who b { font: 600 15px var(--font-heading); color: var(--text); }
.tg-tielist__h { margin: 18px 0 4px; font: 500 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.tg-tiepick { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-tiepick__select, .tg-tiepick__label { min-height: 44px; padding: 0 10px; border: 1px solid var(--tg-line-2); border-radius: 10px; background: var(--bg-0); color: var(--text); font: 400 15px var(--font-body); max-width: 100%; }
.tg-tiepick__label { flex: 1 1 180px; }
.tg-tiepick__chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.tg-tiepick--between { margin-top: 10px; }
@media (max-width: 767px) {
  .tg-more { grid-template-columns: 1fr; }
  .tg-ask { grid-template-columns: 1fr; gap: 2px; }
  .tg-ask dd { margin-bottom: 10px; }
  .tg-groups { grid-template-columns: 1fr; }
  .tg-aggtable th:nth-child(2), .tg-aggtable td:nth-child(2) { width: 52px; }
  .tg-dialog--wide { width: auto; max-height: 85dvh; }
}
/* The phase 0 mix heading sits in the card's own small caps, and long overlay labels get their own column. */
.tg-insight [data-insights] > h3 { margin: 0 0 8px; font: 700 15px/1.3 var(--font-heading); color: var(--text-secondary); word-spacing: normal; }
.tg-roomcard .tg-ins__lines li { grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); }
.tg-roomcard .tg-ins__lines b { overflow-wrap: break-word; }
.tg-tree__gen { font: 600 10.5px var(--font-body); }
.tg-tree__name { font-size: 13px; }
@media (max-width: 767px) { .tg-roomcard .tg-ins__lines li { grid-template-columns: 1fr; } }
.tg-chartlist, .tg-chartlist ul { list-style: none; margin: 0; padding: 0; }
.tg-chartlist ul { margin-left: 12px; padding-left: 14px; border-left: 1.5px solid var(--tg-line-2); }
.tg-chartlist li { padding: 4px 0; }
.tg-chartlist__person { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 36px; padding: 4px 12px 4px 10px; border: 1px solid var(--tg-line-2); border-left: 5px solid var(--chip, var(--tg-gray)); border-radius: 10px; background: var(--bg-0); cursor: pointer; }
.tg-chartlist__person.is-outside { border-style: dashed; border-left-style: solid; }
.tg-chartlist__person b { font: 600 14px var(--font-heading); }
.tg-chartlist__role { font-size: 12.5px; color: var(--text-muted); }
.tg-aggtable td:first-child, .tg-aggtable th:first-child { white-space: nowrap; }
.tg-ask dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tg-ask dd .tg-person { flex: none; }
.tg-ask dd span { flex: 1 1 220px; }
/* ---------- /7 ---------- */

/* Stage 5: readable arrivals, settings and phone filters. */
.tg-chips { flex-wrap: wrap; overflow: visible; min-width: 0; }
.tg-arrival-notice { margin: 12px 0 20px; padding: 16px; border: 1px solid var(--tg-line-2); border-radius: 12px; }
.tg-arrival-notice .tg-act { margin: 4px; }
.tg-arrival-notice p { margin: 0 0 8px; }
.tg-meta { overflow-wrap: anywhere; }
.tg-row[data-arrival] .tg-status { white-space: normal; align-items: flex-start; }
.tg-row[data-arrival] .tg-status::before { flex-shrink: 0; margin-top: .45em; }
.tg-settings-page { max-width: 760px; padding: 32px var(--tg-gutter) 80px; }
.tg-settings fieldset { border: 0; padding: 0; margin: 18px 0; min-width: 0; }
.tg-settings fieldset > label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.tg-settings input[type="radio"] { accent-color: var(--tg-me); width: 20px; height: 20px; }
.tg-settings .tg-st-sw__track { flex-shrink: 0; }
.tg-settings h2 { font-size: 21px; }
.tg-dialog input[type="email"] { width: 100%; min-height: 44px; color: var(--text); background: var(--bg-0); border: 1px solid var(--tg-line-2); border-radius: 10px; padding: 0 12px; }
body:has(.tg-dialog.is-open) .tg-toast { visibility: hidden; }
@media (max-width: 600px) {
  .tg-map { display: block; }
  .tg-map svg { width: 100%; height: auto; }
  .tg-map figcaption { margin-top: 12px; }
  .tg-chips .tg-chip { flex: 0 1 auto; }
}

/* Stage 5 A5: keyboard states and non-color cues. */
.tg-kinds label:has(input:focus-visible), .tg-stage label:has(input:focus-visible) { outline: 2px solid var(--tg-me); outline-offset: 2px; }
.tg-kinds legend.tg-field { margin: 16px 0 6px; font-size: 13.5px; color: var(--text-secondary); }
.tg-paircell__fit { display: block; white-space: normal; }
.tg-paircell[data-fit="patience"] { border-style: dashed; }
.tg-toast:empty { display: none; }
.tg-map__hit { pointer-events: all; }
.tg-map__q:focus-visible path, .tg-map__dot:focus-visible .tg-map__hit { stroke: var(--text); stroke-width: 3px; stroke-dasharray: 4 2; }
/* DUO-WALK-7: the quarter's button is its corner letter; its 48 px target is invisible until it has focus. */
.tg-map__key, .tg-map__key:focus { cursor: pointer; outline: none; }
.tg-map .tg-map__key-hit, .tg-map__key-hit { fill: transparent; stroke: none; }
.tg-map__key:focus-visible .tg-map__key-hit { stroke: var(--text); stroke-width: 3px; stroke-dasharray: 4 2; }
[data-theme="light"] .tg-page :focus-visible,
[data-theme="light"] .tg-page .tg-kinds label:has(input:focus-visible),
[data-theme="light"] .tg-page .tg-stage label:has(input:focus-visible),
[data-theme="light"] .tg-page input:focus-visible + .tg-toggle__track,
[data-theme="light"] .tg-page input:focus-visible + .tg-st-sw__track { outline-color: var(--text); }

/* Before you sit down, the meeting brief (member_build item 5): a tg-dialog--wide that reads top to bottom. */
.tg-dialog.tg-brief { box-sizing: border-box; overscroll-behavior: contain; }
.tg-brief__basis { font-size: 13px; }
.tg-brief__part { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--tg-line-2); }
.tg-brief__part h3 { margin: 0 0 6px; font: 700 15px/1.3 var(--font-heading); }
.tg-dialog .tg-brief__names { margin: 0 0 6px; color: var(--text); font-weight: 600; }
.tg-brief__part ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.tg-brief__part li + li { margin-top: 4px; }
.tg-brief__each { display: grid; grid-template-columns: minmax(80px, max-content) 1fr; gap: 6px 14px; margin: 0; font-size: 14px; line-height: 1.5; }
.tg-brief__each dt { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tg-brief__each dd { margin: 0; color: var(--text-secondary); }
@media (max-width: 480px) { .tg-brief__each { grid-template-columns: 1fr; gap: 2px; } .tg-brief__each dd { margin-bottom: 8px; } }
.tg-brief__hint { flex-basis: 100%; margin: 6px 0 0; font-size: 13px; color: inherit; }

/* Household on Pro (WT_MemberBuild_02, migration 132, slice H1): /together/household, /together/join and the link on the Together
   page (site/js/together/household.js). Plain boxes (div, never section: styles.css pads every section), 44 px targets, and a
   dialog that uses the Together dialog's own rules with a scrim of its own (the room sheet's scrim is hidden on a laptop). */
.tg.tg-hh { max-width: 868px; padding-left: var(--tg-gutter); padding-right: var(--tg-gutter); }   /* the Together page pads its own inner column (line 320 sets .tg to 0) */
.tg-hh-back { margin: 0 0 12px; }
.tg-hh-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-secondary); text-decoration: none; }
.tg-hh-back a:hover { color: var(--text); }
.tg-hh-body { margin-top: 18px; }
.tg-hh-part { margin: 0 0 18px; padding: 20px; border: 1px solid var(--tg-line-2); border-radius: 16px; background: var(--tg-surface); overflow-wrap: anywhere; }
.tg-hh-part__h { margin: 0 0 6px; font: 700 21px/1.25 var(--font-heading); }
.tg-hh-part__h3 { margin: 22px 0 8px; font: 700 17px/1.3 var(--font-heading); }
.tg-hh-name { margin: 0 0 6px; font: 800 26px/1.2 var(--font-heading); letter-spacing: -.02em; }
.tg-hh-lead { margin: 0 0 10px; font-size: 17px; line-height: 1.55; color: var(--text); }
.tg-hh-sub, .tg-hh-privacy { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.tg-hh-note { margin: 8px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--bg-1); color: var(--text); font-size: 15px; }
.tg-hh-scout { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--tg-me); border-radius: 8px; background: var(--bg-1); color: var(--text); font-size: 15px; line-height: 1.5; }
.tg-hh-people { list-style: none; margin: 10px 0 0; padding: 0; }
.tg-hh-person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--tg-line-2); }
.tg-hh-person.is-hidden .tg-hh-person__name { color: var(--text-secondary); }
.tg-hh-person__who { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.tg-hh-person__name { font: 600 16px/1.35 var(--font-body); color: var(--text); }
.tg-hh-person__note { font-size: 15px; line-height: 1.5; color: var(--text); }
.tg-hh-person__meta { font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.tg-hh-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-hh-form { margin-top: 14px; }
.tg-hh-form label.tg-field, .tg-hh-part label.tg-field { display: block; margin: 0 0 6px; font-size: 14px; color: var(--text-secondary); }
.tg-hh-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-hh-input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--tg-line-2); border-radius: 10px; background: var(--bg-0); color: var(--text); font: 400 16px var(--font-body); box-sizing: border-box; }
.tg-hh-part > .tg-hh-input { display: block; width: 100%; }
.tg-hh-input:disabled { opacity: .6; }
.tg-hh-msg { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.tg-hh-msg:empty { margin: 0; }
.tg-hh-row { margin-top: 14px; }
/* The account page's household card: its two actions sit side by side with a gap, and wrap on a phone. */
[data-household-account] .tg-hh-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tg-hh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.tg-hh-chips .tg-chip { font-size: 14px; color: var(--text); }
.tg-hh-chip__n { color: var(--text-secondary); font-size: 13px; }
.tg-hh-chips .tg-chip[aria-pressed="true"] .tg-hh-chip__n { color: var(--bg-0); }
.tg-hh-entries { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--tg-line-2); }
.tg-hh-more { margin-top: 12px; }
.tg-hh-foot { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.tg-hh-danger { color: var(--text); }
.tg-hh-link { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tg-hh-link .tg-hh-sub { flex-basis: 100%; }
.tg-hh-list { margin: 8px 0 0; padding-left: 20px; }
.tg-hh-list li { margin: 6px 0; font-size: 15px; line-height: 1.55; }
.tg-hh-check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 8px; font-size: 16px; color: var(--text); cursor: pointer; }
.tg-hh-check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--tg-me); }
.tg-hh-results { list-style: none; margin: 12px 0 0; padding: 0; }
.tg-hh-results li { margin: 0 0 6px; }
.tg-hh-result { display: block; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--tg-line-2); border-radius: 10px; background: var(--bg-0); color: var(--text); font: 500 15px var(--font-body); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.tg-hh-result[aria-pressed="true"] { border-color: var(--tg-me); box-shadow: inset 0 0 0 1px var(--tg-me); }
.tg-hh-dialog textarea, .tg-hh-textarea { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--tg-line-2); border-radius: 10px; background: var(--bg-0); color: var(--text); font: 400 16px/1.45 var(--font-body); box-sizing: border-box; resize: vertical; }
.tg-hh-dialog input[type="text"] { font-size: 16px; }
.tg-hh-dialog .tg-dialog__row { flex-wrap: wrap; }
.tg-hh-dialog { overflow-y: auto; }
.tg-hh-scrim { position: fixed; inset: var(--wt-top-height, 64px) 0 0 0; z-index: 9002; background: var(--tg-scrim); opacity: 0; transition: opacity var(--tg-base) var(--tg-ease); }
.tg-hh-scrim.is-open { opacity: 1; }
@media (max-width: 767px) {
  .tg-hh { padding-bottom: calc(var(--wt-bottom-height, 64px) + 40px); }
  .tg-hh-part { padding: 16px; }
  .tg-hh-name { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .tg-hh-scrim { transition: none; } }