/* Consistent, readable group-type badges on desktop and mobile. */
.group-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  padding: 3px 8px 3px 3px;
  border: 1px solid currentColor;
  border-radius: 9px;
  font: 650 12px/1.25 system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}
.group-type-badge img { display: block; width: 22px; height: 22px; flex-shrink: 0; }
.group-type-sports { color: #155ca8; background: #edf5ff; }
.group-type-family { color: #246c49; background: #eef8f1; }
.group-type-friends { color: #8648ad; background: #f8f1fc; }
.group-type-work { color: #945914; background: #fff5e7; }
.group-name-with-type { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.teamnames .typed-team-row { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; padding: 12px; }
.typed-team-name { font-weight: 650; overflow-wrap: anywhere; }
.chatidentity strong > .group-type-badge { margin-left: 8px; }
.teamrightmenu h2 .group-type-badge { margin-top: 3px; }
[data-theme="dark"] .group-type-sports { background: #182d46; color: #a5d1ff; }
[data-theme="dark"] .group-type-family { background: #1c3528; color: #a8e2bd; }
[data-theme="dark"] .group-type-friends { background: #33233e; color: #ddbbf4; }
[data-theme="dark"] .group-type-work { background: #3b2d1a; color: #f3d09a; }

/* v48: legacy .side a span rules were intended for menu glyphs only.
   Explicitly restore the layout of group names and type labels at every width. */
#side.side.tree .teamnames {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: 4px;
}
#side.side.tree .teamnames .typed-team-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  gap: 7px;
  padding: 12px;
  text-align: left;
  white-space: normal;
}
#side.side.tree .typed-team-row .typed-team-name {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  font-size: calc(14px * var(--wif-text-scale, 1));
  line-height: 1.4;
  text-align: left;
  overflow-wrap: break-word;
  word-break: normal;
}
#side.side.tree .typed-team-row .group-type-badge {
  display: inline-flex;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  font-size: calc(12px * var(--wif-text-scale, 1));
  line-height: 1.25;
  text-align: left;
}
#side.side.tree .typed-team-row .group-type-badge > span {
  display: inline;
  width: auto;
  flex: 0 1 auto;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}

/* Features shortcut and group preference panel. */
.account { flex-wrap: wrap; }
#groupFeaturesDialog .row { gap: 18px; }
#groupFeaturesDialog .feature-switch { flex-shrink: 0; }
#groupFeaturesDialog select { background: var(--nav-surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
#groupFeaturesDialog::backdrop { background: rgb(0 0 0 / 45%); }

/* v51 plan/benefit column alongside each group switch. */
.group-feature-row { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(130px,.9fr) auto; align-items:center; gap:14px; }
.group-plan-label { color:var(--muted); font-size:13px; line-height:1.4; }
.group-plan-label.plus { color:var(--blue); font-weight:650; }
@media(max-width:540px){
 .group-feature-row { grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; }
 .group-feature-row>.group-plan-label { grid-column:1; grid-row:2; }
 .group-feature-row>.feature-switch,.group-feature-row>button {grid-column:2;grid-row:1 / span 2;}
}

/* Feature navigation and adjacent upgrade links stay separate and readable. */
.right-feature-row { display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--line); }
.teamrightmenu .right-feature-row>a { flex:1; min-width:0; overflow-wrap:break-word; }
.right-feature-upgrade { flex-shrink:0; border:0; border-radius:6px; padding:10px 6px; min-height:44px; background:transparent; color:var(--blue,#0874c4); font:600 12px system-ui; text-decoration:underline; cursor:pointer; }
.right-feature-upgrade:hover { background:var(--nav-soft); }
.right-feature-upgrade:focus-visible { outline:2px solid var(--nav-focus); outline-offset:2px; }