/* Team: the formation and one agent's page.
 * Phone first: an indented tree whose guide lines show who reports to whom.
 * Where the Team column is wide enough, the same list becomes a top-down
 * chart whose connector lines are borders on the list items, so it reflows.
 */
.app.team-wide{max-width:1160px}
.team-layout{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--sunk)}
.team-layout button{min-height:36px;min-width:64px;border:0;border-radius:var(--r-pill);padding:0 16px;background:transparent;color:var(--soft);font:inherit;font-size:var(--t-xs);font-weight:600;cursor:pointer}
.team-layout button[aria-pressed="true"]{background:var(--card);color:var(--ink)}
.team-layout button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.team-toolbar-head{flex-wrap:wrap}
.team-toolbar-head .team-layout{margin-left:auto}

#team-card.is-formation{background:transparent;border:0;border-radius:0;overflow:visible}
.fm{container:fm/inline-size;padding-bottom:var(--s-5)}
.fm ul{list-style:none;margin:0;padding:0}
.fm-face{display:flex;flex:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-pill);overflow:hidden}
.fm-face svg{display:block;width:40px;height:40px}
.fm-initial{background:var(--sunk);color:var(--ink);font-size:var(--t-sm);font-weight:600}
.fm-initial.is-you{background:var(--ink);color:var(--paper)}
.fm-you-row{display:flex;align-items:center;gap:var(--s-3);min-height:48px;font-size:var(--t-sm)}

/* Phone and narrow columns: the tree. */
.fm-you>.fm-kids{margin-left:19px}
.fm-node>.fm-kids{margin-left:27px}
.fm-kids>.fm-node{position:relative;padding:var(--s-1) 0 var(--s-1) 20px;border-left:1px solid var(--edge)}
.fm-kids>.fm-node::before{content:"";position:absolute;left:-1px;top:0;width:18px;height:34px;border-bottom:1px solid var(--edge)}
.fm-kids>.fm-node:last-child{border-left-color:transparent}
.fm-kids>.fm-node:last-child::before{border-left:1px solid var(--edge);border-bottom-left-radius:var(--r-sm)}
.fm-flat{margin-left:0}
.fm-flat>.fm-node{padding-left:0;border-left:0}
.fm-flat>.fm-node::before{display:none}
.fm-spine{display:none}

.fm-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;column-gap:var(--s-3);align-items:center;width:100%;min-height:60px;padding:var(--s-2);border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--ink);text-decoration:none;text-align:left;font:inherit;cursor:pointer}
.fm-card:hover{background:var(--card);border-color:var(--edge)}
/* The flag sits by the name, so the status line under it keeps the row's width. */
.fm-card{position:relative}
.fm-card>.fm-who{grid-column:2/-1}
.fm-card:has(:where(.fm-waiting:not([hidden])))>.fm-who>.fm-name{padding-right:136px}
.fm-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fm-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.fm-name{font-size:var(--t-sm);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.fm-job{font-size:var(--t-xs);line-height:1.35;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-status{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:var(--t-xs);line-height:1.35;color:var(--soft)}
.fm-status>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A phone row lets the app's mark name the app; the words stay for screen readers. */
.fm-card .fm-in{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fm-status.is-working{color:var(--live)}
.fm-status.is-none,.fm-status.is-empty{color:var(--faint)}
.fm-logo{display:block;flex:none;width:14px;height:14px}
.fm-dot{flex:none;width:8px;height:8px;border-radius:var(--r-pill);background:var(--live)}
.fm-ring{flex:none;width:8px;height:8px;border-radius:var(--r-pill);border:1px solid currentColor}
.fm-now,.fm-todo,.fm-chip{grid-column:2/-1;font-size:var(--t-xs);line-height:1.4}
.fm-now{margin-top:var(--s-1);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-todo{color:var(--soft)}
.fm-todo-waiting{display:none}
.fm-todo b{font-weight:600;color:var(--brand-on-soft)}
.fm-todo:empty{display:none}
.fm-waiting{position:absolute;top:var(--s-2);right:var(--s-2);padding:2px 10px;border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-on-soft);font-size:var(--t-xs);font-weight:600;white-space:nowrap}
.fm-chip{justify-self:start;margin-top:var(--s-1);padding:1px 9px;border:1px solid var(--edge);border-radius:var(--r-pill);color:var(--soft)}
.fm-handed{grid-column:2/-1;justify-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:var(--s-1);font-size:var(--t-xs);line-height:1.4;color:var(--soft)}
.fm-handed .fm-chip{margin:0;white-space:nowrap}
.fm-card.is-empty{border:1px dashed var(--edge)}
.fm-card.is-empty .fm-initial{background:transparent;border:1px dashed var(--edge);color:var(--faint)}
.fm-empty{padding:var(--s-5) 0;font-size:var(--t-sm)}
.fm-also{margin-top:var(--s-6)}
.fm-also h3{margin:0 0 var(--s-2);font-size:var(--t-sm);font-weight:600}

/* Wide columns: the chart. */
@container fm (min-width:780px){
  .fm-tree>.fm-you{display:flex;flex-direction:column;align-items:center}
  .fm .fm-you-row{justify-content:center}
  .fm .fm-kids{margin-left:0}
  .fm .fm-one,.fm .fm-grid{position:relative;width:100%;padding-top:24px}
  .fm .fm-one::before,.fm .fm-grid::before{content:"";position:absolute;left:50%;top:0;height:12px;border-left:1px solid var(--edge)}
  .fm .fm-one::before{height:24px}
  .fm .fm-one>.fm-node{display:flex;flex-direction:column;align-items:center;padding:0;border:0}
  .fm .fm-one>.fm-node>.fm-card{max-width:320px}
  .fm .fm-one>.fm-node::before{display:none}
  .fm .fm-grid{display:grid;gap:36px 16px}
  .fm .fm-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm .fm-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fm .fm-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fm .fm-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .fm .fm-grid>.fm-node{padding:0;border:0}
  .fm .fm-grid>.fm-node::before{left:-8px;right:-8px;top:-12px;width:auto;height:12px;border:0;border-top:1px solid var(--edge);border-radius:0}
  .fm .fm-grid>.fm-node::after{content:"";position:absolute;left:50%;top:-12px;height:12px;border-left:1px solid var(--edge)}
  .fm .fm-grid>.fm-first::before{left:50%}
  .fm .fm-grid>.fm-last::before{right:50%}
  .fm .fm-grid.fm-multi>.fm-first::before{left:-8px}
  .fm .fm-spine{display:block;position:absolute;left:-8px;top:-12px;height:calc(100% + 36px);border-left:1px solid var(--edge)}
  .fm .fm-grid>.fm-node>.fm-card,.fm .fm-one>.fm-node>.fm-card,.fm .fm-also .fm-card{grid-template-columns:36px minmax(0,1fr);align-items:start;align-content:start;row-gap:var(--s-2);height:100%;min-height:0;padding:var(--s-3) var(--s-4) var(--s-4);border-color:var(--edge);background:var(--card)}
  .fm .fm-card>.fm-face,.fm .fm-card>.fm-face svg{width:36px;height:36px}
  .fm .fm-card .fm-now,.fm .fm-card .fm-todo,.fm .fm-card .fm-handed{grid-column:1/-1}
  /* The face on top, then the name, job and status at the card's full width:
     a chart card has at most about 126px beside its face, too little for a
     long name such as "Communications" to stay whole. */
  .fm .fm-grid>.fm-node>.fm-card>.fm-who,.fm .fm-one>.fm-node>.fm-card>.fm-who,.fm .fm-also .fm-card>.fm-who{display:contents}
  .fm .fm-card>.fm-who>.fm-name{grid-column:1/-1;grid-row:2;align-self:start}
  .fm .fm-card>.fm-who>.fm-job,.fm .fm-card>.fm-who>.fm-status{grid-column:1/-1}
  .fm .fm-card>.fm-who>.fm-job{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-top:calc(var(--s-1) * -1)}
  .fm .fm-card .fm-job{white-space:normal}
  .fm .fm-grid .fm-card .fm-in,.fm .fm-one .fm-card .fm-in,.fm .fm-also .fm-card .fm-in{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal}
  .fm .fm-grid .fm-card .fm-name,.fm .fm-one .fm-card .fm-name,.fm .fm-also .fm-card .fm-name{padding-right:0}
  .fm .fm-grid .fm-card .fm-status,.fm .fm-one .fm-card .fm-status,.fm .fm-also .fm-card .fm-status{align-items:flex-start}
  .fm .fm-grid .fm-card .fm-status>span,.fm .fm-one .fm-card .fm-status>span,.fm .fm-also .fm-card .fm-status>span{white-space:normal}
  .fm .fm-card .fm-status .fm-logo,.fm .fm-card .fm-status .fm-dot,.fm .fm-card .fm-status .fm-ring{margin-top:2px}
  .fm .fm-grid .fm-card,.fm .fm-one .fm-card,.fm .fm-also .fm-card{position:relative}
  .fm .fm-grid .fm-waiting,.fm .fm-one .fm-waiting,.fm .fm-also .fm-waiting{display:none}
  .fm .fm-grid .fm-todo:not(:empty),.fm .fm-one .fm-todo:not(:empty),.fm .fm-also .fm-todo:not(:empty){display:block}
  .fm .fm-grid .fm-todo-waiting,.fm .fm-one .fm-todo-waiting,.fm .fm-also .fm-todo-waiting{display:inline}
  .fm .fm-grid .fm-now,.fm .fm-one .fm-now,.fm .fm-also .fm-now{margin:0;padding:6px 10px;border-radius:var(--r-sm);background:var(--sunk);white-space:normal}
  .fm .fm-stack{margin-top:var(--s-2)}
  .fm .fm-stack>.fm-node{padding-left:var(--s-4)}
  .fm .fm-flat>.fm-node{padding-left:0}
  .fm .fm-also .fm-flat{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
}

/* The agent page renders in app-ui; only its place in the shell lives here. */
#view-team.showing-agent>:not(#team-agent-page):not(dialog){display:none}
.agent-page{padding:var(--s-4) 0 var(--s-7)}
.ap-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:-6px;padding-right:12px;color:var(--brand);font-size:var(--t-sm);font-weight:600;text-decoration:none}
.ap-back svg{display:block}
@media(max-width:520px){.team-layout button{min-height:44px}}

/* Names never split mid-word. Each card measures itself (the Team column is
   the named container fm, so a card's own container does not hide the chart
   layout from what is inside it). A phone row whose name would have under
   120px beside the "waiting on you" flag moves the flag under the name,
   above the count; a narrow phone row steps the name down a size. On the
   chart the name sits under the face, and the narrowest cards (140px) step
   it down a size. */
.fm-card{container:fm-card/inline-size}
@container fm-card (max-width:307px){
  .fm-card:has(:where(.fm-waiting:not([hidden])))>.fm-who>.fm-name{padding-right:0}
  .fm-waiting{position:static;grid-column:2/-1;justify-self:start;margin-top:var(--s-1);order:1}
  .fm-card>.fm-now,.fm-card>.fm-todo,.fm-card>.fm-handed{order:2}
}
@container fm-card (max-width:140px){
  .fm .fm-card>.fm-who>.fm-name{font-size:var(--t-xs)}
}
@container fm (max-width:779px){
  @container fm-card (max-width:200px){
    .fm-card>.fm-who>.fm-name{font-size:var(--t-xs)}
  }
}