/* Team & roles admin — direction C "two-pane directory".
   Reference lock (shadcn/ui system): white canvas, #f2f2f2 secondary surface,
   #e5e5e5 hairlines, near-black text, black as the only action colour, muted
   greys for secondary text, 10px inputs/buttons, 14px panels, 9999px pills,
   semantic red only in the danger zone. Scoped under #team-view so the rest of
   the portal keeps its own tokens. */
#team-view.team-admin {
  --ta-bg: #ffffff;
  --ta-ghost: #f2f2f2;
  --ta-line: #e5e5e5;
  --ta-mid: #6b6b6b;
  --ta-ink: #0a0a0a;
  --ta-black: #000000;
  --ta-red: #c22b10;
  --ta-green: #0f8a20;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: calc(100vh - 120px);
  background: var(--ta-bg);
  color: var(--ta-ink);
  font-size: 14px;
  line-height: 1.43;
  border-top: 1px solid var(--ta-line);
}
#team-view .ta-list { border-right: 1px solid var(--ta-line); overflow: auto; max-height: calc(100vh - 120px); position: sticky; top: 0; }
#team-view .ta-list-head { padding: 16px 16px 8px; display: flex; align-items: center; justify-content: space-between; }
#team-view .ta-list-head h1 { font-size: 18px; margin: 0; letter-spacing: -0.025em; font-weight: 600; }
#team-view .ta-search-wrap { position: relative; padding: 0 16px 8px; }
#team-view .ta-search { width: 100%; font: inherit; font-size: 13px; padding: 6px 44px 6px 10px; border: 1px solid var(--ta-line); border-radius: 10px; background: #fff; color: var(--ta-ink); }
#team-view .ta-search:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ta-line); }
#team-view .ta-search-wrap kbd { position: absolute; right: 26px; top: 6px; font: inherit; font-size: 11px; color: var(--ta-mid); border: 1px solid var(--ta-line); border-radius: 6px; padding: 0 5px; }
#team-view .ta-group { padding: 10px 16px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ta-mid); font-weight: 500; display: flex; justify-content: space-between; }
#team-view .ta-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; border-left: 2px solid transparent; }
#team-view .ta-item:hover { background: #fafafa; }
#team-view .ta-item.sel { background: var(--ta-ghost); border-left-color: var(--ta-black); }
#team-view .ta-item.new .ta-item-text span { color: var(--ta-green); }
#team-view .ta-item-text { min-width: 0; }
#team-view .ta-item-text b { display: block; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#team-view .ta-item-text span { color: var(--ta-mid); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#team-view .ta-av { width: 30px; height: 30px; border-radius: 50%; background: var(--ta-ghost); border: 1px solid var(--ta-line); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; color: var(--ta-ink); flex-shrink: 0; }
#team-view .ta-av-lg { width: 48px; height: 48px; font-size: 16px; }
#team-view .ta-pills { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
#team-view .ta-pill { font-size: 11px; padding: 2px 8px; border-radius: 9999px; background: var(--ta-ghost); color: var(--ta-ink); white-space: nowrap; font-weight: 500; }
#team-view .ta-pill.inv { background: #171717; color: #fff; }
#team-view .ta-pill.out { background: transparent; border: 1px solid #a1a1a1; }
#team-view .ta-empty { padding: 24px 16px; color: var(--ta-mid); font-size: 13px; }
#team-view .ta-detail { padding: 28px 40px 40px; max-width: 860px; }
#team-view .ta-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
#team-view .ta-head h2 { margin: 0; font-size: 22px; letter-spacing: -0.025em; font-weight: 600; display: flex; gap: 8px; align-items: center; }
#team-view .ta-email { color: var(--ta-mid); }
#team-view .ta-head-actions { margin-left: auto; display: flex; gap: 8px; }
#team-view .ta-btn { font: inherit; font-size: 13px; font-weight: 500; border-radius: 10px; padding: 6px 12px; border: 1px solid var(--ta-line); background: #fff; color: var(--ta-ink); cursor: pointer; }
#team-view .ta-btn:hover:not(:disabled) { background: #fafafa; }
#team-view .ta-btn:disabled { opacity: 0.4; cursor: default; }
#team-view .ta-btn-primary { background: var(--ta-black); color: #fff; border-color: var(--ta-black); }
#team-view .ta-btn-primary:hover:not(:disabled) { background: #222; }
#team-view .ta-btn-danger { color: var(--ta-red); border-color: #f1c9c2; }
#team-view .ta-block { border-top: 1px solid var(--ta-line); padding: 20px 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
#team-view .ta-block h3 { margin: 0; font-size: 14px; font-weight: 500; }
#team-view .ta-block p { margin: 4px 0 0; color: var(--ta-mid); font-size: 13px; }
#team-view .ta-segment { display: inline-flex; border: 1px solid var(--ta-line); border-radius: 10px; overflow: hidden; }
#team-view .ta-segment button { font: inherit; font-size: 13px; padding: 7px 14px; border: none; background: #fff; color: var(--ta-ink); cursor: pointer; border-right: 1px solid var(--ta-line); }
#team-view .ta-segment button:last-child { border-right: none; }
#team-view .ta-segment button.on { background: var(--ta-black); color: #fff; }
#team-view .ta-role { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ta-line); }
#team-view .ta-role:last-of-type { border-bottom: none; }
#team-view .ta-role b { display: block; font-weight: 500; }
#team-view .ta-role small { color: var(--ta-mid); font-size: 12.5px; }
#team-view .ta-toggle { width: 36px; height: 20px; border-radius: 9999px; background: var(--ta-line); border: none; position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; padding: 0; }
#team-view .ta-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
#team-view .ta-toggle.on { background: var(--ta-black); }
#team-view .ta-toggle.on::after { left: 18px; }
#team-view .ta-toggle:focus-visible { outline: 2px solid var(--ta-ink); outline-offset: 2px; }
#team-view .ta-delta { border: 1px solid var(--ta-line); border-radius: 14px; padding: 12px 14px; background: #fff; margin-top: 12px; }
#team-view .ta-delta ul { margin: 6px 0 0; padding-left: 18px; color: var(--ta-mid); font-size: 13px; }
#team-view .ta-delta li.add { color: var(--ta-green); }
#team-view .ta-delta li.rm { color: var(--ta-red); text-decoration: line-through; }
#team-view .ta-lbl { font-size: 12px; color: var(--ta-mid); }
#team-view .ta-input { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; color: var(--ta-mid); }
#team-view .ta-input input { font: inherit; font-size: 14px; color: var(--ta-ink); padding: 6px 10px; border: 1px solid var(--ta-line); border-radius: 10px; background: #fff; }
#team-view .ta-input input:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ta-line); }
#team-view .ta-hist { margin: 0; padding: 0; list-style: none; }
#team-view .ta-hist li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 6px 0; font-size: 13px; }
#team-view .ta-hist time { color: var(--ta-mid); }
#team-view .ta-hist span { color: var(--ta-mid); display: block; font-size: 12px; }
#team-view .ta-zone { border: 1px solid #f1c9c2; border-radius: 14px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#team-view .ta-zone b { display: block; font-weight: 500; }
#team-view .ta-zone span { color: var(--ta-mid); font-size: 13px; }
#team-view .ta-savebar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--ta-line); padding: 14px 0; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
#team-view .ta-savebar .ta-n { margin-right: auto; color: var(--ta-mid); font-size: 13px; }
#team-view .ta-savebar .ta-n.err { color: var(--ta-red); }
@media (max-width: 900px) {
  #team-view.team-admin { grid-template-columns: 1fr; }
  #team-view .ta-list { position: static; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--ta-line); }
  #team-view .ta-detail { padding: 20px 16px 32px; }
  #team-view .ta-block { grid-template-columns: 1fr; gap: 8px; }
}