/* Deep Field view styles: attendees (labelled "Guests" in the UI). Companion to
   deep-field.css (tokens/components live there). Owned by the attendees view;
   keep everything token-driven, flat, AA in both themes.
   Ported from the approved reskin/guests.html page-local styles. */

/* ===== Toolbar: search + manage exclusions ===== */
.att-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.att-search-wrap { position: relative; flex: 1; min-width: 200px; }
.att-search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-62); pointer-events: none; }
.att-search-input {
  width: 100%; background: var(--panel); color: var(--text);
  border: 1px solid var(--border-14); border-radius: 12px;
  padding: 12px 14px 12px 42px; font-family: inherit; font-weight: 500; font-size: 14px;
}
.att-search-input::placeholder { color: var(--ink-62); }
.att-search-input:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.att-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
  padding: 12px 16px; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: 14px;
  border: 1px solid var(--border-14); background: var(--panel); color: var(--text);
}
.att-btn svg { width: 16px; height: 16px; }
/* Punch-through dots in the exclusions icon match the button ground in both themes */
.att-btn svg circle { fill: var(--panel); }
.att-btn:hover { background: var(--panel-2); }
.att-btn:hover svg circle { fill: var(--panel-2); }
.att-btn:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }

/* ===== Filter pills (segmented, echoes .impact-toggle) ===== */
.att-pills { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--inset); border: 1px solid var(--border); border-radius: 999px; margin-bottom: 14px; }
.att-pill { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit; color: var(--ink-62); font-weight: 600; font-size: 13px; padding: 8px 15px; border-radius: 999px; }
.att-pill:hover:not(.active) { color: var(--text); }
.att-pill.active { background: var(--lime); color: var(--ink); font-weight: 700; }
.att-pill:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }

/* ===== Scope row: view + meeting-time + status selects + the A-Z jump ===== */
.att-scope-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }

.att-count { color: var(--ink-62); font-weight: 500; font-size: 13px; margin: 0 0 12px; }

/* ===== A-Z jump (People view): only letters that exist are shown ===== */
.att-alpha { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.att-alpha-lead { color: var(--ink-62); font-weight: 600; font-size: 13px; margin-right: 4px; }
.att-alpha-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 12px; color: var(--ink-62);
  width: 26px; height: 26px; border-radius: 8px;
}
.att-alpha-btn:hover:not([disabled]):not(.active) { background: var(--inset); color: var(--text); }
.att-alpha-btn.active { background: var(--lime); color: var(--ink); }
.att-alpha-btn[disabled] { color: var(--ink-40); cursor: default; opacity: 0.45; }
.att-alpha-btn:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 1px; }

/* ===== Guest list ===== */
.att-list-container { margin-bottom: 4px; }
.att-list { display: flex; flex-direction: column; gap: 10px; }
.att-row {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
}
.att-row.is-flagged { background: var(--inset); }
.att-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: var(--green); color: var(--lime);
}
.att-row.is-flagged .att-avatar { background: var(--track-switch); color: var(--ink-62); }
.att-identity { flex: 1; min-width: 0; }
.att-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.att-name { font-weight: 700; font-size: 15px; color: var(--text); }
.att-email { color: var(--ink-62); font-size: 13px; font-weight: 500; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-meetings { color: var(--ink-62); font-size: 13px; font-weight: 500; margin: 4px 0 0; }

/* Network + flag badges (bright fills carry Ink text only; off-states are neutral) */
.att-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: 11px; }
.att-badge.network { background: var(--lime); color: var(--ink); }
.att-badge.network svg { width: 12px; height: 12px; }
.att-flag { background: var(--chip-none-bg); color: var(--ink-62); }
.att-flag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-40); }
/* Read-only "Team setting" provenance (Layer-2, org-wide). Neutral chip +
   ink-62 text (AA in both themes) — a teal DOT differentiates it without ever
   putting low-contrast teal text on a teal fill. */
.att-badge.att-team { border: 1px solid var(--border-14); }
.att-badge.att-team .dot { background: var(--num-teal); }
/* "Included" status on domain rows: same neutral chip, a Green dot carries the
   state (decorative — the chip text says "Included", so no contrast reliance). */
.att-badge.att-ok .dot { background: var(--green); }

/* ===== Domains view rows ===== */
.dom-note { color: var(--ink-62); font-size: 13px; font-weight: 500; margin: 4px 0 0; }
.dom-action { padding: 9px 14px; font-size: 13px; flex: none; }
@media (max-width: 719px) {
  /* Mirror the guest rows: the action drops below the identity, indented past the avatar */
  .dom-row { align-items: flex-start; }
  .dom-action { margin-left: 56px; }
}

/* ===== Inclusion control (segmented: Include / Exclude / Always off) ===== */
.incl-control { display: inline-flex; gap: 3px; padding: 3px; background: var(--inset); border: 1px solid var(--border); border-radius: 999px; flex: none; }
.incl-btn {
  appearance: none; border: 0; background: transparent; white-space: nowrap; cursor: pointer;
  font-family: inherit; color: var(--ink-62); font-weight: 600; font-size: 12px; padding: 7px 12px; border-radius: 999px;
}
.incl-btn:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 1px; }
.incl-btn.active { background: var(--lime); color: var(--ink); font-weight: 700; }
.incl-btn.active.exc { background: var(--gold); }
/* Always-off is a NEUTRAL active segment (no brand pair): theme tokens so it flips and text stays readable */
.incl-btn.active.always { background: var(--track-switch); color: var(--text); }
.incl-control.locked { opacity: 0.72; }
.incl-control.locked .incl-btn { cursor: not-allowed; }

/* ===== Pagination (built on shared tokens) ===== */
.att-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.att-pagination-info { color: var(--ink-62); font-weight: 500; font-size: 13px; }
.att-pagination-controls { display: flex; gap: 8px; }
.att-page-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 9px 14px; border-radius: 11px; font-family: inherit; font-weight: 700; font-size: 13px;
  border: 1px solid var(--border-14); background: var(--panel); color: var(--text);
}
.att-page-btn svg { width: 15px; height: 15px; }
.att-page-btn:hover:not([disabled]) { background: var(--panel-2); }
.att-page-btn:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.att-page-btn[disabled] { color: var(--ink-40); background: var(--inset); cursor: default; }

/* Mobile: inclusion control drops to its own full-width line below the identity */
@media (max-width: 719px) {
  .att-row { align-items: flex-start; }
  .att-identity { flex: 1 1 auto; }
  .incl-control { width: calc(100% - 56px); margin-left: 56px; }
  .incl-btn { flex: 1; text-align: center; }
}
@media (max-width: 419px) {
  /* Very narrow: give the control the full row so three segments never overflow */
  .incl-control { width: 100%; margin-left: 0; }
  .incl-btn { padding: 7px 8px; }
}
@media (min-width: 720px) {
  .att-row { flex-wrap: nowrap; }
  .att-email { max-width: none; }
}

/* ===== Manage-exclusions modal: domain / individual rule management ===== */
.excl-section { margin-bottom: 22px; }
.excl-section:last-child { margin-bottom: 0; }
.excl-heading { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text); }
.excl-help { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--ink-62); }
.excl-add-row { display: flex; gap: 8px; margin-bottom: 8px; }
.excl-input { flex: 1; padding-left: 14px; } /* no leading search icon in the modal */
.excl-add-btn { flex: none; }
.excl-error { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--num-burgundy); }
.excl-empty { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-62); }
.excl-list { list-style: none; margin: 0; padding: 0; }
.excl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.excl-row:last-child { border-bottom: 0; }
.excl-value { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.excl-remove {
  appearance: none; border: 0; background: transparent; cursor: pointer; flex: none;
  font-family: inherit; font-weight: 700; font-size: 13px; color: var(--num-burgundy);
  padding: 4px 8px; border-radius: 8px;
}
.excl-remove:hover { background: var(--chip-none-bg); }
.excl-remove:focus-visible { outline: 2px solid var(--num-teal); outline-offset: 2px; }

/* ===== Admin exclude-scope popup (personal vs org-wide) ===== */
.att-scope-lead { margin: 0 0 14px; font-size: 14px; font-weight: 500; color: var(--ink-62); }
.att-scope-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.att-scope-option {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 14px; border: 1px solid var(--border-14); border-radius: 12px; background: var(--panel);
}
.att-scope-option:hover { background: var(--panel-2); }
.att-scope-option:focus-within { outline: 2px solid var(--num-teal); outline-offset: 2px; }
.att-scope-option input[type="radio"] { margin-top: 2px; flex: none; accent-color: var(--num-teal); }
.att-scope-copy { display: flex; flex-direction: column; gap: 3px; }
.att-scope-title { font-size: 14px; font-weight: 700; color: var(--text); }
.att-scope-desc { font-size: 13px; font-weight: 500; color: var(--ink-62); line-height: 1.45; }