/* The two territory-level pages — Profile and Territory & team.
   Both are light pages, like everything inside an account, and take their
   colour from brand/tokens.css. No raw values here. */
:root{
  --bg:var(--tc-bg); --ink:var(--tc-text); --muted:var(--tc-text-muted);
  --card:var(--tc-surface); --line:var(--tc-border);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--tc-font-body); font-size:var(--tc-text-base); line-height:var(--tc-leading-body);
  -webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:720px; margin:0 auto;
  padding:calc(env(safe-area-inset-top) + var(--tc-space-5)) var(--tc-space-5) var(--tc-space-12);
  display:flex; flex-direction:column; gap:var(--tc-space-5);
}
.head{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--tc-space-4)}
.head h1{
  margin:var(--tc-space-2) 0 0; font-family:var(--tc-font-display); font-size:var(--tc-text-xl);
  letter-spacing:var(--tc-tracking-tight); line-height:var(--tc-leading-tight);
}
.back{
  display:inline-flex; align-items:center; gap:var(--tc-space-2); min-height:var(--tc-tap-min);
  font-family:var(--tc-font-data); font-size:var(--tc-text-xs); font-weight:700;
  letter-spacing:var(--tc-tracking-data); text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.back:hover{color:var(--ink)}

/* ---- buttons, shared with the rest of the app ---- */
.btn{
  font-family:var(--tc-font-body); font-size:var(--tc-text-sm); font-weight:600;
  min-height:var(--tc-tap-min); padding:0 var(--tc-space-5);
  border-radius:var(--tc-radius-sm); border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer;
}
.btn:hover{border-color:var(--ink)}
.btn:focus-visible,.avatar:focus-visible{outline:3px solid var(--tc-signal-deep); outline-offset:2px}
.avatar{
  width:var(--tc-tap-min); height:var(--tc-tap-min); flex-shrink:0; border-radius:var(--tc-radius-pill);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-family:var(--tc-font-data); font-size:var(--tc-text-sm); font-weight:700; cursor:pointer;
}
.account{position:relative; flex-shrink:0}
.menu{
  position:absolute; right:0; top:calc(100% + var(--tc-space-2)); z-index:10; min-width:230px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--tc-radius-md);
  padding:var(--tc-space-4);
  display:flex; flex-direction:column; gap:var(--tc-space-1);
}
.menu-name{font-weight:600}
.menu-email{font-size:var(--tc-text-sm); color:var(--muted); margin-bottom:var(--tc-space-3); word-break:break-all}

/* ---- cards ---- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--tc-radius-lg);
  padding:var(--tc-space-6); display:flex; flex-direction:column; gap:var(--tc-space-4);
}
.card h2{
  margin:0; font-family:var(--tc-font-display); font-size:var(--tc-text-lg);
  letter-spacing:var(--tc-tracking-tight); line-height:var(--tc-leading-tight);
}
.gate p{margin:0; color:var(--muted)}
.hint{margin:0; font-size:var(--tc-text-sm); color:var(--muted)}
.state{margin:0}
.fixed{margin:0; font-size:var(--tc-text-sm); color:var(--muted)}
.fixed b{color:var(--ink); font-weight:600; word-break:break-all}
.actions{display:flex; flex-wrap:wrap; gap:var(--tc-space-2)}

/* ---- forms ---- */
.form{display:flex; flex-direction:column; gap:var(--tc-space-4)}
.form label{display:flex; flex-direction:column; gap:var(--tc-space-2); font-size:var(--tc-text-sm); font-weight:600; color:var(--muted)}
.form input,.form textarea{
  font-family:var(--tc-font-body); font-size:var(--tc-text-base); color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--tc-radius-sm);
  padding:var(--tc-space-3); width:100%; min-height:var(--tc-tap-min);
}
.form textarea{min-height:88px; resize:vertical; line-height:var(--tc-leading-body)}
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid var(--tc-signal-deep); outline-offset:1px}

/* ---- a list of people ---- */
.count{
  font-family:var(--tc-font-data); font-size:var(--tc-text-xs); font-weight:700;
  letter-spacing:var(--tc-tracking-data); text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:var(--tc-space-2); margin:0;
}
.count::after{content:''; flex:1; height:1px; background:var(--line)}
.people{display:flex; flex-direction:column; gap:var(--tc-space-3)}
.person{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--tc-space-3);
  border-top:1px solid var(--line); padding-top:var(--tc-space-3);
}
.person:first-child{border-top:0; padding-top:0}
.person .id{flex:1 1 180px; min-width:0; display:flex; flex-direction:column; gap:2px}
.person .acts{display:flex; flex-wrap:wrap; align-items:center; gap:var(--tc-space-2); margin-left:auto}
/* On a phone the buttons get their own line rather than crowding the name. */
@media (max-width:560px){
  .person{align-items:flex-start}
  .person .acts{margin-left:0; flex:1 1 100%}
}
.person .id b{font-weight:600; overflow-wrap:anywhere}
.person .id small{font-size:var(--tc-text-sm); color:var(--muted); overflow-wrap:anywhere}
.tag{
  font-family:var(--tc-font-data); font-size:var(--tc-text-xs); font-weight:700;
  letter-spacing:var(--tc-tracking-data); text-transform:uppercase; color:var(--muted);
}
.you{color:var(--ink)}

.toast{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + var(--tc-space-6)); transform:translateX(-50%);
  background:var(--app-toast-bg); color:var(--app-toast-fg);
  padding:var(--tc-space-3) var(--tc-space-5); border-radius:var(--tc-radius-md);
  font-size:var(--tc-text-sm); max-width:calc(100% - 40px); z-index:50;
}