/* © 2026 WiredType. Proprietary and confidential. Not licensed for copying or reuse. Terms: https://wiredtype.com/terms */
/* /together/add, the parts the add lane added to the design's ADD PEOPLE block (which lives in together.css):
   the "Take the free test first" panel, form fields, the batch label, the Google tester line, the Gmail panel, the share
   moment on the check step with the send choice that waits for it, and the Type a name and email door.
   Same tokens as together.css (.tg-page); phone layout below 768 px. */
.tg-ap-make { border-style: dashed; }
/* The code never breaks inside itself (7HJ- / 8JKE); on a narrow phone it moves down whole. The link may be long
   (a room link, wiredtype.com/card/CODE#room=<id>), so it wraps inside the note (ADD-NOTE-LINK-OVERFLOW-1018). */
.tg-ap-note__code b { white-space: nowrap; }
.tg-ap-note__code > span { min-width: 0; max-width: 100%; }
.tg-ap-note__code b[data-note-link] { white-space: normal; overflow-wrap: anywhere; }
.tg-ap-field { display: block; margin: 4px 0 6px; font: 600 14px var(--font-heading); color: var(--text); }
.tg-ap-input { display: block; width: 100%; max-width: 420px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--tg-line-2); border-radius: 10px; background: var(--bg-0); color: var(--text); font: 400 16px var(--font-body); }
.tg-ap-input:focus { outline: 2px solid var(--tg-me); outline-offset: 1px; }
.tg-ap-input--short { display: inline-block; width: auto; min-width: 0; flex: 1 1 200px; max-width: 280px; }
.tg-ap-labelrow { margin-top: 14px; }
.tg-ap-labelrow > label { font-size: 14px; color: var(--text-secondary); margin-right: 4px; }
.tg-ap-labelrow small { flex-basis: 100%; font-size: 12.5px; color: var(--text-muted); }
.tg-ap-small { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }
.tg-ap-gmail { max-width: none; margin-top: 14px; padding: 18px; }
.tg-ap-gmail h3 { font: 700 18px/1.25 var(--font-heading); margin: 0; word-spacing: normal; }
.tg-ap-gmail p { font-size: 14px; }
/* The share moment (CONTRACT 7): the pressed answer is ringed, and both buttons keep the same size and weight. */
.tg-ap-share { max-width: none; }
.tg-ap-share .tg-ap-btn[aria-pressed="true"] { border-color: var(--tg-me); box-shadow: inset 0 0 0 1px var(--tg-me); background: color-mix(in srgb, var(--tg-me) 10%, transparent); }
.tg-ap-share__wait { font-size: 13.5px; }
.tg-ap-choice[inert] { opacity: .45; }
.tg-ap-gr[data-kind="self"] .tg-ap-found__line::before { background: transparent; border: 1.5px solid var(--text-muted); }
.tg-ap-gr[data-kind="duplicate"] .tg-ap-found__line::before, .tg-ap-gr[data-kind="name_guessed"] .tg-ap-found__line::before { background: var(--disc-s); }
.tg-ap-variant { min-height: 32px; margin-top: 2px; padding: 2px 6px; border: 1px solid var(--tg-line-2); border-radius: 6px; background: var(--bg-0); color: var(--text); font-size: 12.5px; max-width: 100%; }
/* The hub's Switchboard sets .tg's side padding to 0 (together.css, section 3) because its rail and main carry their own;
   this page has no rail, so it takes the page gutter back (16 px on a phone, 40 px on a laptop). */
.tg.tg-ap { padding-left: var(--tg-gutter); padding-right: var(--tg-gutter); }
/* Two answers of equal size and weight: equal columns on a laptop, one above the other on a phone. */
.tg-ap .tg-ap-equal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* The check grid's first column is wide enough for its INVITE heading. */
@media (min-width: 768px) { .tg-ap-gr { grid-template-columns: 56px minmax(150px, 1fr) minmax(200px, 1.2fr) minmax(240px, 1.4fr); } }
/* Four doors when Google is on: one row on a laptop, one column on a phone (together.css). */
@media (min-width: 768px) { .tg-ap-doors { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
/* The typed door: a Name and an Email field per person, side by side on a laptop and stacked on a phone. */
.tg-ap-typed { display: grid; gap: 12px; margin-top: 20px; max-width: 720px; }
.tg-ap-typed__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; }
.tg-ap-typed__field { display: grid; gap: 4px; min-width: 0; font: 600 13.5px var(--font-heading); color: var(--text-secondary); }
.tg-ap-typed__field .tg-ap-input { max-width: none; }
/* On a laptop the Name and Email labels show once, over the first row; later rows keep them for screen readers. */
@media (min-width: 768px) {
  .tg-ap-typed__row + .tg-ap-typed__row .tg-ap-typed__field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 767px) {
  .tg-ap .tg-ap-equal { grid-template-columns: 1fr; }
  .tg-ap-typed__row { grid-template-columns: 1fr; padding-bottom: 12px; border-bottom: 1px solid var(--tg-line-2); }
  .tg-ap-input--short { max-width: none; }
  .tg-ap-gmail { padding: 14px; }
}

.tg-add-room { margin: 0; }
.tg-add-room::backdrop { background: rgb(0 0 0 / .45); }
.tg-add-room select { min-height: 44px; width: 100%; color: var(--text); background: var(--bg-0); }

/* Keep busy list buttons focusable while repeated presses are ignored. */
.tg-ap [aria-disabled="true"] { opacity: .55; cursor: default; }
/* TOGETHER-ONE-INVITE-ROOM-CONTROLS-1016: rooms and the label in one optional box, closed for one person. The summary is a
   44 px tap target with its own open and closed marker. */
.tg-ap-extras { margin-top: 22px; border-top: 1px solid var(--tg-line-2); padding-top: 4px; }
.tg-ap-extras__summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font: 600 15px var(--font-heading); color: var(--text); }
.tg-ap-extras__summary::-webkit-details-marker { display: none; }
.tg-ap-extras__summary::before { content: ''; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.tg-ap-extras[open] > .tg-ap-extras__summary::before { transform: rotate(45deg); }
.tg-ap-extras__summary:focus-visible { outline: 2px solid var(--tg-me); outline-offset: 2px; border-radius: 6px; }
.tg-ap-extras > .tg-ap-tags:first-of-type { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .tg-ap-extras__summary::before { transition: none; } }