/**
 * team-v2.css — Team tab v2 conversion (Phase 4)
 *
 * Scope: #screen-team and all team subtab surfaces.
 *   - Team topbar with team-switcher button + settings
 *   - Subtab strip navigation
 *   - Subtab mount containers
 *   - Empty state (no team joined)
 *
 * Approach: re-skin EXISTING markup using the canonical v2-theme.css token set.
 * No markup or handler changes — every data-action, id, and export is preserved.
 * No invented token names; surface ascendance follows the mockup token contract
 * (--s1 chrome/rails → --s2 cards → --s3 inputs/wells).
 *
 * Loaded AFTER v2-theme.css so token references resolve to the v2 set.
 * Cascade weight is intentional: higher-specificity selectors here override
 * legacy inline styles via CSS specificity, not !important.
 *
 * NO fabricated content. Pure styling layer.
 */

/* =============================================================================
   TEAM SCREEN ROOT
   ========================================================================== */

#screen-team {
  background: var(--bg);
}

/* =============================================================================
   TEAM TOPBAR
   ========================================================================== */

.team-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--s1);
  z-index: 2;
}

/* Team switcher button (primary action in topbar) */
.team-topbar #team-switcher-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-hi);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.team-topbar #team-switcher-btn:hover {
  background: var(--s3);
  border-color: var(--line2);
}

.team-topbar #team-switcher-btn:active {
  background: var(--s2);
}

/* Settings button in topbar */
.team-topbar #team-settings-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-mid);
  cursor: pointer;
  transition: all 0.15s ease;
}

.team-topbar #team-settings-btn:hover {
  background: var(--s2);
  border-color: var(--line2);
  color: var(--ink-hi);
}

/* Flex spacer in topbar */
.team-topbar > span[style*="flex:1"],
.team-topbar > .team-topbar-spacer {
  flex: 1;
}

/* =============================================================================
   SUBTAB STRIP
   ========================================================================== */

.team-subtabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  overflow-x: auto;
  background: var(--s1);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.team-subtabs::-webkit-scrollbar {
  display: none;
}

/* Individual subtab button */
.team-subtabs .subtab {
  flex: 1 0 auto;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--ink-mid);
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.team-subtabs .subtab:hover {
  background: var(--s2);
  color: var(--ink);
}

.team-subtabs .subtab:active {
  background: var(--s3);
}

/* Active subtab state */
.team-subtabs .subtab.active {
  background: var(--olive-dim);
  color: var(--olive);
}

.team-subtabs .subtab.active:hover {
  background: var(--olive-dim);
  color: var(--olive);
}

/* =============================================================================
   SUBTAB MOUNT CONTAINERS
   ========================================================================== */

.team-subtab-mounts {
  flex: 1;
  overflow-y: auto;
}

.team-subtab-mount {
  display: none;
  padding: 16px;
}

.team-subtab-mount[data-subtab-mount="chat"] {
  padding: 0;
}

/* =============================================================================
   INBOX SUBTAB — internal mode strip + empty-state
   ==========================================================================
   The team-inbox subtab renders its own mode strip (Dms | Announcements |
   Mentions) inside the team-inbox-mount. That strip uses the same `.subtabs`
   class as the kit/training shells — which v084-prototype.css L138-141 marks
   `position: sticky; top: 56px; z-index: 4;`. Inside the team-subtab-mounts
   scroll container that offset opens a 56px gap above the strip AND lets the
   strip overlap the centered empty-state copy ("No announcements yet." etc.)
   in an empty Announcements / Mentions / DMs list (Ed report msg 23044,
   2026-06-12 — overlap confirmed in all three sections).

   Scoping the override under `.team-inbox-subtabs` (added by
   js/team-inbox.js) is surgical: kit/training shells keep their sticky
   behavior because they're inside a viewport-level scroll context where
   `top: 56px` is correct. The inbox strip sits inside an already-padded
   subtab-mount with a short list and the strip isn't tall — pinning it
   isn't needed. Reset to static flow so the empty-state copy doesn't
   render UNDER it.
*/

.team-inbox-root .team-inbox-subtabs {
  position: static;
  top: auto;
  z-index: auto;
  display: flex;
  gap: 6px;
  padding: 8px;
  background: var(--s1);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.team-inbox-root .team-inbox-list {
  padding: 8px;
}

/* Empty-state copy. The class lives on the only child of team-inbox-list
   when there are zero messages or the fetch failed — kept centered with
   generous padding so it reads as a deliberate empty state, not a render
   glitch. */
.team-inbox-root .team-inbox-empty {
  padding: 24px;
  text-align: center;
  color: var(--ink-mid);
}

/* =============================================================================
   EMPTY STATE (no team joined)
   ========================================================================== */

#screen-team > section:first-of-type,
#screen-team .team-empty-state {
  padding: 24px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  background: var(--s1);
}

#screen-team > section:first-of-type h2,
#screen-team .team-empty-state h2 {
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 600;
  color: var(--ink-hi);
  margin: 0 0 8px 0;
  letter-spacing: 0.02em;
}

#screen-team > section:first-of-type p,
#screen-team .team-empty-state p {
  font-size: 14px;
  color: var(--ink-mid);
  margin: 0 0 16px 0;
  line-height: 1.4;
}

/* Empty state CTA button */
#screen-team #team-empty-switcher-btn,
#screen-team .team-empty-state .btn-primary {
  padding: 12px 20px;
  background: var(--olive);
  border: none;
  border-radius: var(--r-md);
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#screen-team #team-empty-switcher-btn:hover,
#screen-team .team-empty-state .btn-primary:hover {
  background: var(--olive-hi);
}

/* =============================================================================
   V2 MOCKUP IA — Team Appbar (badge tile + name/meta + chat icon)
   ============================================================================
   Replaces the Phase-0 .team-topbar visual with the Fable-5 mockup pattern
   (badger-mockups/04-teams.html). Keeps the .team-topbar class so legacy
   selectors still hit, but the .team-appbar-v2 specificity wins for layout.
   ========================================================================== */

#screen-team .team-appbar-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 4;
}

#screen-team .team-appbar-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 7px 12px 7px 7px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-ui);
  flex: 1;
  min-width: 0;
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#screen-team .team-appbar-switcher:hover {
  background: var(--s2);
  border-color: var(--line2);
}

#screen-team .team-appbar-badge {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--s3);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-hi);
  letter-spacing: 0.05em;
  flex: 0 0 auto;
}

#screen-team .team-appbar-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

#screen-team .team-appbar-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-hi);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-team .team-appbar-meta {
  font-size: 9.5px;
  color: var(--ink-low);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-team .team-appbar-chev {
  width: 10px;
  height: 10px;
  color: var(--ink-low);
  flex: 0 0 auto;
  margin-left: 2px;
}

#screen-team .team-appbar-chat-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--s1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mid);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#screen-team .team-appbar-chat-btn:hover {
  background: var(--s2);
  color: var(--ink-hi);
}

#screen-team .team-appbar-chat-btn svg {
  width: 17px;
  height: 17px;
}

#screen-team .team-appbar-chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--olive, #a4ae90);
  color: #0d0e10;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  letter-spacing: 0;
  pointer-events: none;
}

/* =============================================================================
   V2 MOCKUP IA — Primary segment strip (SQUAD / EVENTS / CHAT / MORE)
   ========================================================================== */

#screen-team .team-segs-v2 {
  display: flex;
  gap: 4px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px;
  margin: 4px 16px 12px;
  overflow: visible;  /* override base .team-subtabs scroll for 4-fixed layout */
}

#screen-team .team-segs-v2 .team-seg {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-mid);
  text-transform: uppercase;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#screen-team .team-segs-v2 .team-seg:hover {
  color: var(--ink);
}

#screen-team .team-segs-v2 .team-seg.active {
  background: var(--s3);
  color: var(--ink-hi);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 10px rgba(0, 0, 0, 0.3);
}

#screen-team .team-segs-v2 .subtab-unread-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--olive, #a4ae90);
  color: #0d0e10;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
}

/* =============================================================================
   SQUAD subtab — composed home
   ========================================================================== */

#screen-team [data-subtab-mount="squad"] {
  padding: 0 16px 24px;
}

#screen-team .team-squad-loading {
  padding: 32px 8px;
  text-align: center;
  color: var(--ink-low);
  font-size: 13px;
}

#screen-team .team-squad-section {
  margin-bottom: 18px;
}

#screen-team .team-squad-secthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 2px 10px;
}

#screen-team .team-squad-secthead h2 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0;
}

#screen-team .team-squad-sectlink {
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-low);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

#screen-team .team-squad-sectlink:hover {
  color: var(--ink-hi);
  background: var(--s1);
}

#screen-team .team-squad-empty,
#screen-team .team-squad-empty-block {
  padding: 22px 16px;
  text-align: center;
  background: var(--s2);
  border: 1px dashed var(--line2);
  border-radius: 14px;
  color: var(--ink-mid);
}

#screen-team .team-squad-empty h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-hi);
  margin: 0 0 6px;
}

#screen-team .team-squad-empty p,
#screen-team .team-squad-empty-block p {
  font-size: 12.5px;
  margin: 0 0 12px;
  line-height: 1.4;
}

#screen-team .team-squad-empty .btn {
  margin-top: 6px;
}

/* NEXT OP card */
#screen-team .team-squad-event {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 28px rgba(0, 0, 0, 0.38);
  background: linear-gradient(160deg, #1d2024 0%, #101214 70%);
}

#screen-team .team-squad-event-art {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  pointer-events: none;
  background:
    radial-gradient(420px 180px at 90% 0%, rgba(164, 174, 144, 0.09), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 9px);
}

#screen-team .team-squad-event-inner {
  position: relative;
  padding: 16px 16px 14px;
}

#screen-team .team-squad-event-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#screen-team .team-squad-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 3px 7px;
  background: rgba(0, 0, 0, 0.25);
}

#screen-team .team-squad-tag.olive {
  color: var(--olive);
  border-color: rgba(164, 174, 144, 0.4);
  background: var(--olive-dim);
}

#screen-team .team-squad-event h3 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-hi);
  line-height: 1;
  margin: 0;
}

#screen-team .team-squad-event-meta {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-mid);
  flex-wrap: wrap;
}

#screen-team .team-squad-event-meta b {
  color: var(--ink);
  font-weight: 600;
}

#screen-team .team-squad-mi {
  display: flex;
  align-items: center;
  gap: 5px;
}

#screen-team .team-squad-mi svg {
  width: 12px;
  height: 12px;
  color: var(--ink-low);
}

#screen-team .team-squad-rsvp {
  display: flex;
  gap: 5px;
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 4px;
}

#screen-team .team-squad-rs {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-mid);
  text-transform: uppercase;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#screen-team .team-squad-rs:hover {
  color: var(--ink);
}

#screen-team .team-squad-rs.on {
  background: var(--olive);
  color: #0d0e10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#screen-team .team-squad-rsvp-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  font-size: 10.5px;
  color: var(--ink-mid);
}

#screen-team .team-squad-rsvp-counts b {
  color: var(--olive);
  font-weight: 700;
}

/* TEAM CHAT preview */
#screen-team .team-squad-chat {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 28px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

#screen-team .team-squad-msg {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

#screen-team .team-squad-msg:last-child {
  border-bottom: 0;
}

#screen-team .team-squad-msg-av {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--s3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  flex: 0 0 auto;
  letter-spacing: 0.03em;
}

#screen-team .team-squad-msg-body {
  flex: 1;
  min-width: 0;
}

#screen-team .team-squad-msg-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#screen-team .team-squad-msg-who {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-hi);
  letter-spacing: 0.03em;
}

#screen-team .team-squad-msg-when {
  font-size: 9.5px;
  color: var(--ink-low);
}

#screen-team .team-squad-msg p {
  font-size: 12px;
  color: var(--ink-mid);
  margin: 2px 0 0;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ROSTER preview */
#screen-team .team-squad-roster {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#screen-team .team-squad-member {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 28px rgba(0, 0, 0, 0.38);
}

#screen-team .team-squad-member-av {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(150deg, #22262b, #121417);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-hi);
  letter-spacing: 0.04em;
  position: relative;
  flex: 0 0 auto;
}

#screen-team .team-squad-member-av::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--s2);
  background: var(--ink-low);
}

#screen-team .team-squad-member-av.online::after {
  background: var(--olive);
}

#screen-team .team-squad-member-body {
  flex: 1;
  min-width: 0;
}

#screen-team .team-squad-member-body h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-hi);
  line-height: 1.05;
  margin: 0;
}

#screen-team .team-squad-member-sub {
  font-size: 10.5px;
  color: var(--ink-mid);
  margin-top: 3px;
}

#screen-team .team-squad-member-role {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--ink-mid);
  background: var(--s1);
  flex: 0 0 auto;
}

#screen-team .team-squad-member-role.owner {
  color: var(--ink-hi);
  border-color: rgba(255, 255, 255, 0.3);
}

/* =============================================================================
   MORE subtab — menu of secondary surfaces
   ========================================================================== */

#screen-team [data-subtab-mount="more"] {
  padding: 16px;
}

#screen-team .team-more-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#screen-team .team-more-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-family: var(--font-ui);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

#screen-team .team-more-row:hover {
  background: var(--s3);
  border-color: var(--line2);
}

#screen-team .team-more-row:active {
  transform: scale(0.997);
}

#screen-team .team-more-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--s3);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex: 0 0 auto;
}

#screen-team .team-more-icon svg {
  width: 18px;
  height: 18px;
}

#screen-team .team-more-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#screen-team .team-more-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-hi);
  line-height: 1;
}

#screen-team .team-more-desc {
  font-size: 11px;
  color: var(--ink-mid);
  letter-spacing: 0.02em;
}

#screen-team .team-more-chev {
  width: 14px;
  height: 14px;
  color: var(--ink-low);
  flex: 0 0 auto;
}

/* =============================================================================
   Back-to-more pill on a hidden subtab mount
   ========================================================================== */

#screen-team .team-back-to-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  cursor: pointer;
  margin: 0 0 12px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#screen-team .team-back-to-more:hover {
  background: var(--s2);
  color: var(--ink-hi);
}

#screen-team .team-back-to-more svg {
  width: 12px;
  height: 12px;
}